An article explaining the details of using Redux Hooks

This article will talk about the details of using Redux Hooks. I hope it will be helpful to everyone!

##Redux Hooks

Introduction to Hooks in Redux

In previous redux development, in order to combine components with redux, we used connect in the react-redux library:

But this method must use high-order functions to combine the returned high-order Component;

and must write: mapStateToProps and mapDispatchToProps mapping functions, the specific usage is explained in the previous article; [Related recommendations:

Redis video tutorial, Programming video 】

Starting from Redux7.1, the Hook method is provided. There is no need to write connect and corresponding mapping functions in the function component.

The function of useSelector is to map state to the component:

Parameter 1: It is required to pass in a callback function, and the state will be passed to the callback function; the callback function The return value is required to be an object. Write the data to be used in the object. We can directly deconstruct the returned object and get the data in the state that we want to use.

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

Parameter 2: Can be compared Determine whether the component is re-rendered;

useSelector will compare the two objects we return by default to see if they are equal;

How can we compare?

In the second parameter of useSelector, passing in the
• shallowEqual function in the react-redux library can be compared

import { shallowEqual } from 'react-redux'

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

That is, we must Returning two completely equal objects will not cause re-rendering;

useDispatch is very simple, just call the useDispatch Hook, and you can directly get the dispatch function. Then you can use it directly in the component;

const dispatch = useDispatch()

We can also get the current store object through useStore (just understand it, it is not recommended to directly operate the store object);

---

Using Hooks in Redux

Let’s use Redux’s Hooks to implement a counter in the App component, and implement a case of modifying the message in the sub-component of the App:

First we create a simple 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

To use the react-redux library, you need to import Provider to wrap the App component

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

Use useSelector and useDispatch in the component to implement the operations of obtaining data in the store and modifying the data in the 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

Now we have used and modified it in the component The data in the store, but now there is a small problem (Performance Optimization)

When the counter is modified in the App component, the App component will re-render this There is no problem; but the Home component uses message and does not use counter, but it will be re-rendered; similarly, if the message is modified in the Home sub-component, the root component App will also be re-rendered; this is because by default UseSelector is the entire state that is monitored. When the state changes, it will cause the component to be re-rendered

To solve this problem, we need to use the second parameter of useSelector to control whether re-rendering is needed. We only need to use the useSelector function Just pass in the

shallowEqual function in the react-redux library, it will automatically perform a shallow comparison internally, and will only re-render when the data in the state used does change

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

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of An article explaining the details of using Redux Hooks. For more information, please follow other related articles on the PHP Chinese website!