這篇文章主要介紹“Redux Hooks如何使用”，在日常操作中，相信很多人在Redux Hooks如何使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Redux Hooks如何使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

淶水網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,淶水網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為淶水上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的淶水做網(wǎng)站的公司定做！

Redux Hooks

Redux中Hooks介紹

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

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

并且必須編寫(xiě):mapStateToProps和 mapDispatchToProps映射的函數(shù)。

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

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

參數(shù)一: 要求傳入一個(gè)回調(diào)函數(shù), 會(huì)將state傳遞到該回調(diào)函數(shù)中; 回調(diào)函數(shù)的返回值要求是一個(gè)對(duì)象, 在對(duì)象編寫(xiě)要使用的數(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(
  
    
  
)

在組件時(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 (
    

      
{message}
      修改message
    
  )
})


// 根組件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 (
    

      
當(dāng)前計(jì)數(shù): {counter}
       changeNumber(1)}>+1
       changeNumber(-1)}>-1

      
    
  )
})

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)聽(tīng)的整個(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 (
    

      
{message}
      修改message
    
  )
})


// 根組件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 (
    

      
當(dāng)前計(jì)數(shù): {counter}
       changeNumber(1)}>+1
       changeNumber(-1)}>-1

      
    
  )
})

export default App

到此，關(guān)于“Redux Hooks如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！