React中Redux Hooks的使用詳解

更新時(shí)間：2023年07月08日 10:50:55 作者：學(xué)全棧的灌湯包

這篇文章主要介紹了React Redux Hooks的使用詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Redux Hooks

Redux中Hooks介紹

在之前的redux開發(fā)中，為了讓組件和redux結(jié)合起來(lái)，我們使用了react-redux庫(kù)中的connect:

但是這種方式必須使用高階函數(shù)結(jié)合返回的高階組件;

并且必須編寫:mapStateToProps和 mapDispatchToProps映射的函數(shù), 具體使用方式在前面文章有講解;

在Redux7.1開始，提供了Hook的方式，在函數(shù)組件中再也不需要編寫connect以及對(duì)應(yīng)的映射函數(shù)了

useSelector的作用是將state映射到組件中:

參數(shù)一: 要求傳入一個(gè)回調(diào)函數(shù), 會(huì)將state傳遞到該回調(diào)函數(shù)中; 回調(diào)函數(shù)的返回值要求是一個(gè)對(duì)象, 在對(duì)象編寫要使用的數(shù)據(jù), 我們可以直接對(duì)這個(gè)返回的對(duì)象進(jìn)行解構(gòu), 拿到我們要使用state中的數(shù)據(jù)

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

參數(shù)二: 可以進(jìn)行比較來(lái)決定是否組件重新渲染;

useSelector默認(rèn)會(huì)比較我們返回的兩個(gè)對(duì)象是否相等;

如何可以比較呢?
在useSelector的第二個(gè)參數(shù)中, 傳入react-redux庫(kù)中的shallowEqual函數(shù)就可以進(jìn)行比較

import { shallowEqual } from 'react-redux'
const { counter } = useSelector((state) => ({
  counter: state.counter.counter
}), shallowEqual)

也就是我們必須返回兩個(gè)完全相等的對(duì)象才可以不引起重新渲染;

useDispatch非常簡(jiǎn)單，就是調(diào)用useDispatch這個(gè)Hook, 就可以直接獲取到dispatch函數(shù)，之后在組件中直接使用即可;

const dispatch = useDispatch()

我們還可以通過(guò)useStore來(lái)獲取當(dāng)前的store對(duì)象(了解即可, 不建議直接操作store對(duì)象);

Redux中Hooks使用

我們來(lái)使用Redux的Hooks在App組件實(shí)現(xiàn)一個(gè)計(jì)數(shù)器, 在App的子組件中實(shí)現(xiàn)一個(gè)修改message的案例:

首先我們先創(chuàng)建一個(gè)簡(jiǎn)單的store

// 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

// store/index.js
import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./modules/counter"
const store = configureStore({
  reducer: {
    counter: counterSlice
  }
})
export default store

要使用react-redux庫(kù)需要導(dǎo)入Provider對(duì)App組件進(jìn)行包裹

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>
)

在組件時(shí)使用useSelector和useDispatch實(shí)現(xiàn)獲取store中的數(shù)據(jù)和修改store中數(shù)據(jù)的操作

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組件重新渲染")
  // 通過(guò)useSelector獲取到store中的數(shù)據(jù)
  const { message } = useSelector((state) => ({
    message: state.counter.message
  }))
  // useDispatch獲取到dispatch函數(shù)
  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組件重新渲染")
  // 通過(guò)useSelector獲取到store中的數(shù)據(jù)
  const { counter } = useSelector((state) => ({
    counter: state.counter.counter
  }))
  // useDispatch獲取到dispatch函數(shù)
  const dispatch = useDispatch()
  function changeNumber(num) {
    dispatch(changeNumberAction(num))
  }
  return (
    <div>
      <h2>當(dāng)前計(jì)數(shù): {counter}</h2>
      <button onClick={() => changeNumber(1)}>+1</button>
      <button onClick={() => changeNumber(-1)}>-1</button>
      <Home/>
    </div>
  )
})
export default App

現(xiàn)在我們已經(jīng)在組件中使用并且修改了了store中的數(shù)據(jù), 但是現(xiàn)在還有一個(gè)小問(wèn)題(性能優(yōu)化)

當(dāng)App組件中修改了counter時(shí), App組件會(huì)重新渲染這個(gè)是沒(méi)問(wèn)題的; 但是Home組件中使用的是message, 并沒(méi)有使用counter, 卻也會(huì)重新渲染; 同樣的在Home子組件中修改了message, 根組件App也會(huì)重新渲染; 這是因?yàn)樵谀J(rèn)情況下useSelector是監(jiān)聽的整個(gè)state, 當(dāng)state發(fā)生改變就會(huì)導(dǎo)致組件重新渲染

要解決這個(gè)問(wèn)題就需要使用useSelector的第二個(gè)參數(shù)來(lái)控制是否需要重新渲染, 我們只需要在useSelector函數(shù)中傳入react-redux庫(kù)中的shallowEqual函數(shù)即可, 它內(nèi)部會(huì)自動(dòng)進(jìn)行一個(gè)淺層比較, 當(dāng)使用的state中的數(shù)據(jù)確實(shí)發(fā)生變化的時(shí)候才會(huì)重新渲染

import React, { memo } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import { changeMessageAction, changeNumberAction } from './store/modules/counter'
// 子組件Home
const Home = memo(() => {
  console.log("Home組件重新渲染")
  const { message } = useSelector((state) => ({
    message: state.counter.message
  }), shallowEqual)
  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組件重新渲染")
  // 通過(guò)useSelector獲取到store中的數(shù)據(jù)
  const { counter } = useSelector((state) => ({
    counter: state.counter.counter
  }), shallowEqual)
  // useDispatch獲取到dispatch函數(shù)
  const dispatch = useDispatch()
  function changeNumber(num) {
    dispatch(changeNumberAction(num))
  }
  return (
    <div>
      <h2>當(dāng)前計(jì)數(shù): {counter}</h2>
      <button onClick={() => changeNumber(1)}>+1</button>
      <button onClick={() => changeNumber(-1)}>-1</button>
      <Home/>
    </div>
  )
})
export default App

到此這篇關(guān)于React - Redux Hooks的使用細(xì)節(jié)詳解的文章就介紹到這了,更多相關(guān)React Redux Hooks使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: