Artikel yang menerangkan butiran penggunaan Redux Hooks

Artikel ini akan membincangkan butiran penggunaan Redux Hooks, saya harap ia akan membantu anda!

Redux Hooks

Pengenalan kepada Hooks dalam Redux

Dalam pembangunan redux sebelumnya, untuk menggabungkan komponen dengan redux, kami menggunakan connect dalam pustaka react-redux:

Tetapi kaedah ini mesti menggunakan fungsi tertib tinggi untuk menggabungkan tertib tinggi yang dikembalikan Komponen;

dan mesti menulis: mapStateToProps dan mapDispatchToProps fungsi pemetaan, penggunaan khusus dijelaskan dalam artikel sebelumnya; 】Bermula dari Redux 7.1, kaedah Hook disediakan. Tidak perlu menulis fungsi pemetaan sambung dan sepadan dalam komponen fungsi adalah untuk memetakan keadaan kepada komponen :

Parameter 1: Ia diperlukan untuk lulus dalam fungsi panggil balik, dan keadaan akan dihantar kepada fungsi panggil balik; fungsi diperlukan untuk menjadi Objek. Tulis data yang akan digunakan dalam objek Kita boleh menyahbina objek yang dikembalikan dan mendapatkan data dalam keadaan yang kita mahu gunakan

Parameter 2: Boleh dibandingkan untuk memutuskan sama ada Komponen itu memaparkan semula;useSelector

useSelector akan membandingkan dua objek yang kami kembalikan secara lalai untuk melihat sama ada ia sama

;

const { counter } = useSelector((state) => {
  return {
    counter: state.counter.counter
  }
})

Bagaimana kita boleh membandingkan?

Dalam parameter kedua useSelector, anda boleh membandingkan dengan menghantar fungsi dalam pustaka react-redux

Iaitu, kita mesti mengembalikan dua lengkap Hanya objek yang sama tidak akan menyebabkan rendering semula

• shallowEqual
Ia sangat mudah, hanya hubungi useDispatch Hook, anda boleh terus dapatkan; fungsi penghantaran, dan kemudian gunakannya secara langsung dalam komponen

;

import { shallowEqual } from 'react-redux'

const { counter } = useSelector((state) => ({
  counter: state.counter.counter
}), shallowEqual)

Kita juga boleh mendapatkan objek kedai semasa melalui useStore (hanya faham, tidak disyorkan untuk mengendalikan kedai secara langsung. objek);

useDispatch

Menggunakan Cangkuk dalam Redux

const dispatch = useDispatch()

Mari kita gunakan Redux's Hooks untuk melaksanakan pembilang dalam komponen Aplikasi, dan laksanakan kes mengubah suai mesej dalam subkomponen Apl:

---

Mula-mula kami mencipta kedai ringkas

Untuk menggunakan perpustakaan react-redux, anda perlu mengimport Penyedia untuk membalut komponen Apl

// store/modules/counter.js

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    counter: 10,
    message: "Hello World"
  },
  reducers: {
    changeNumberAction(state, { payload }) {
      state.counter = state.counter + payload
    },
    changeMessageAction(state,  {payload }) {
      state.message = payload
    }
  }
})

export const { changeNumberAction, changeMessageAction } = counterSlice.actions

export default counterSlice.reducer

Gunakan useSelector dan gunakanDispatch dalam komponen untuk mendapatkan dan mengubah suai data dalam stor

// store/index.js

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./modules/counter"

const store = configureStore({
  reducer: {
    counter: counterSlice
  }
})

export default store

Kini kami telah menggunakannya dalam komponen Dan data dalam stor telah diubah suai, tetapi masih terdapat masalah kecil (

import React from "react"
import ReactDOM from "react-dom/client"
import { Provider } from "react-redux"
import App from "./12_Redux中的Hooks/App"
import store from "./12_Redux中的Hooks/store"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <Provider store={store}>
    <App/>
  </Provider>
)

Pengoptimuman Prestasi

)

import React, { memo } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { changeMessageAction, changeNumberAction } from './store/modules/counter'

// 子组件Home
const Home = memo(() => {
  console.log("Home组件重新渲染")
  
  // 通过useSelector获取到store中的数据
  const { message } = useSelector((state) => ({
    message: state.counter.message
  }))

  // useDispatch获取到dispatch函数
  const dispatch = useDispatch()
  function changeMessage() {
    dispatch(changeMessageAction("Hello ChenYq"))
  }

  return (
    <div>
      <h2>{message}</h2>
      <button onClick={changeMessage}>修改message</button>
    </div>
  )
})


// 根组件App
const App = memo(() => {
  console.log("App组件重新渲染")
  
  // 通过useSelector获取到store中的数据
  const { counter } = useSelector((state) => ({
    counter: state.counter.counter
  }))

  // useDispatch获取到dispatch函数
  const dispatch = useDispatch()
  function changeNumber(num) {
    dispatch(changeNumberAction(num))
  }
  
  return (
    <div>
      <h2>当前计数: {counter}</h2>
      <button onClick={() => changeNumber(1)}>+1</button>
      <button onClick={() => changeNumber(-1)}>-1</button>

      <Home/>
    </div>
  )
})

export default App

Apabila kaunter diubah suai dalam komponen aplikasi, komponen aplikasi tidak akan ada masalah dengan penanaman semula; -diberikan; begitu juga, jika mesej diubah suai dalam subkomponen Laman Utama, Apl komponen akar juga akan dipaparkan semula ini kerana Secara lalai useSelector mendengar keseluruhan keadaan, ia akan menyebabkan komponen untuk dipaparkan semula

Untuk menyelesaikan masalah ini, anda perlu menggunakan parameter kedua useSelector untuk mengawal sama ada rendering semula diperlukan Kami hanya perlu meneruskan fungsi dalam reaksi-. pustaka redux dalam fungsi useSelector Ia akan melakukan perbandingan cetek secara dalaman secara automatik Apabila data dalam keadaan yang digunakan berubah, ia akan memaparkan semula

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan. sila layari:

Pengajaran Pengaturcaraan

! !

Atas ialah kandungan terperinci Artikel yang menerangkan butiran penggunaan Redux Hooks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!