Ein Artikel, der die Details der Verwendung von Redux Hooks erläutert

In diesem Artikel geht es um die Details der Verwendung von Redux Hooks. Ich hoffe, er ist für alle hilfreich!

Redux-Hooks

Einführung in Hooks in Redux

In der vorherigen Redux-Entwicklung haben wir connect in der React-Redux-Bibliothek verwendet, um Komponenten mit Redux zu kombinieren:

Allerdings Diese Methode muss Funktionen höherer Ordnung in Kombination mit den zurückgegebenen Komponenten höherer Ordnung verwenden und Folgendes schreiben: Die Zuordnungsfunktionen „mapStateToProps“ und „mapDispatchToProps“ werden im vorherigen Artikel erläutert.

Programmiervideo

】Ab Redux7.1 ist die Hook-Methode nicht erforderlich, um Verbindungs- und entsprechende Zuordnungsfunktionen in Funktionskomponenten zu schreiben.

useSelector wird zur Übertragung verwendet Zustandszuordnung zur Komponente

:

Parameter 1: Es ist erforderlich, eine Rückruffunktion zu übergeben, und der Rückgabewert der Rückruffunktion muss ein Objekt sein, und wir kann die im Objekt zu verwendenden Daten schreiben. Das zurückgegebene Objekt direkt dekonstruieren und die Daten in dem Zustand erhalten, den wir verwenden möchtenuseSelector的作用是将state映射到组件中:

参数一: 要求传入一个回调函数, 会将state传递到该回调函数中; 回调函数的返回值要求是一个对象, 在对象编写要使用的数据, 我们可以直接对这个返回的对象进行解构, 拿到我们要使用state中的数据

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

参数二: 可以进行比较来决定是否组件重新渲染;

useSelector默认会比较我们返回的两个对象是否相等;

如何可以比较呢?

• 在useSelector的第二个参数中, 传入react-redux库中的shallowEqual函数就可以进行比较

import { shallowEqual } from 'react-redux'

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

也就是我们必须返回两个完全相等的对象才可以不引起重新渲染;

useDispatch非常简单，就是调用useDispatch这个Hook, 就可以直接获取到dispatch函数，之后在组件中直接使用即可;

const dispatch = useDispatch()

我们还可以通过useStore来获取当前的store对象(了解即可, 不建议直接操作store对象);

---

Redux中Hooks使用

我们来使用Redux的Hooks在App组件实现一个计数器, 在App的子组件中实现一个修改message的案例:

首先我们先创建一个简单的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库需要导入Provider对App组件进行包裹

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

在组件时使用useSelector和useDispatch实现获取store中的数据和修改store中数据的操作

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

现在我们已经在组件中使用并且修改了了store中的数据, 但是现在还有一个小问题(性能优化)

当App组件中修改了counter时, App组件会重新渲染这个是没问题的; 但是Home组件中使用的是message, 并没有使用counter, 却也会重新渲染; 同样的在Home子组件中修改了message, 根组件App也会重新渲染; 这是因为在默认情况下useSelector是监听的整个state, 当state发生改变就会导致组件重新渲染

要解决这个问题就需要使用useSelector的第二个参数来控制是否需要重新渲染, 我们只需要在useSelector函数中传入react-redux库中的shallowEqual

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组件重新渲染")

  // 通过useSelector获取到store中的数据
  const { counter } = useSelector((state) => ({
    counter: state.counter.counter
  }), shallowEqual)

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

Parameter zwei: Es kann ein Vergleich durchgeführt werden, um festzustellen, ob die Komponente erneut gerendert wird;

useSelector vergleicht die beiden Objekte, die wir standardmäßig zurückgeben.

;🎜🎜🎜Wie können wir vergleichen?🎜

• Übergeben Sie im zweiten Parameter von useSelector die Funktion shallowEqual React-Redux-Bibliothek zum Vergleichen li>

rrreee🎜Das heißt, wir müssen zwei völlig gleiche Objekte zurückgeben, um ein erneutes Rendern zu vermeiden 🎜🎜🎜🎜useDispatch ist sehr einfach, Rufen Sie einfach den useDispatch-Hook auf, und Sie können direkt die Dispatch-Funktion abrufen und sie dann direkt in der Komponente verwenden. 🎜; das Store-Objekt);🎜

---

🎜🎜🎜Hooks in Redux verwenden🎜🎜🎜 Lassen Sie uns die Hooks von Redux verwenden, um einen Zähler in der App-Komponente zu implementieren und einen Fall zum Ändern der Nachricht zu implementieren die Unterkomponente der App:🎜🎜🎜Zuerst erstellen wir einen einfachen Store🎜🎜rrreeerrreee🎜🎜Um die React-Redux-Bibliothek zu verwenden, müssen Sie Provider importieren, um die App-Komponente einzuschließen🎜🎜rrreee🎜🎜Verwenden Sie useSelector und useDispatch in die Komponente, um die Vorgänge zum Abrufen und Ändern der Daten im Store auszuführen🎜🎜rrreee🎜 🎜Jetzt haben wir die Daten im Store in der Komponente verwendet und geändert, aber es gibt immer noch ein kleines Problem (Leistungsoptimierung em>)🎜🎜🎜🎜Wenn der Zähler in der App-Komponente geändert wird, ist es kein Problem, dass dies erneut gerendert wird. Die Home-Komponente verwendet jedoch eine Nachricht und keinen Zähler, dies wird jedoch auch der Fall sein Wenn die Nachricht in der Home-Unterkomponente geändert wird, wird sie ebenfalls neu gerendert. Dies ist der Fall, da useSelector standardmäßig den gesamten Status überwacht Komponente, die neu gerendert werden soll🎜🎜Um dieses Problem zu lösen, müssen wir den zweiten Parameter von useSelector verwenden, um zu steuern, ob ein erneutes Rendern erforderlich ist. Wir müssen nur die Funktion useSelector verwenden. Übergeben Sie einfach den Code shallowEqual > Funktion in der React-Redux-Bibliothek. Sie führt intern automatisch einen flachen Vergleich durch. Sie wird nur dann neu gerendert, wenn sich die Daten im verwendeten Zustand ändern Unterrichten🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEin Artikel, der die Details der Verwendung von Redux Hooks erläutert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!