React中Redux Hooks的使用详解

更新时间：2023年07月08日 10:50:55 作者：学全栈的灌汤包

这篇文章主要介绍了React Redux Hooks的使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

Redux Hooks

Redux中Hooks介绍

在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux库中的connect:

但是这种方式必须使用高阶函数结合返回的高阶组件;

并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解;

在Redux7.1开始，提供了Hook的方式，在函数组件中再也不需要编写connect以及对应的映射函数了

useSelector的作用是将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函数即可, 它内部会自动进行一个浅层比较, 当使用的state中的数据确实发生变化的时候才会重新渲染

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

到此这篇关于React - Redux Hooks的使用细节详解的文章就介绍到这了,更多相关React Redux Hooks使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React组件传参方式你了解吗
众所周知 ,在业务开发中,无论用的什么框架,首先要熟悉项目搭建,路由配置和组件通信,所以我们今天要探究的就是React中组件通信的几种方式,快跟随小编一起学习起来吧
2024-03-03
react hooks页面实时刷新方式(setInterval)
这篇文章主要介绍了react hooks页面实时刷新方式(setInterval),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
列表页常见hook封装实例
这篇文章主要为大家介绍了列表页常见的hook封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React优化子组件render的使用
这篇文章主要介绍了React优化子组件render的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
浅谈react路由传参的几种方式
这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
React项目中hook实现展示对话框功能
Modal(模态框)是 web 开发中十分常见的组件,即从页面中弹出的对话框,下面这篇文章主要给大家介绍了关于React项目中hook实现展示对话框功能的相关资料,需要的朋友可以参考下
2022-05-05
react中Hooks的理解和用法小结
Hook是 React 16.8 的新增特性，它可以让你在不编写class的情况下使用state以及其他的React特性，这篇文章主要介绍了react中Hooks的理解和用法,需要的朋友可以参考下
2023-05-05
react如何使用mobx6动态加载数据
MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧
2024-02-02
比ant更丰富Modal组件功能实现示例详解
这篇文章主要为大家介绍了比ant更丰富Modal组件功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React实现菜单栏滚动功能
本文将会基于react实现滚动菜单栏功能,点击菜单,内容区域会自动滚动到对应卡片,内容区域滑动,指定菜单栏会被选中,代码简单易懂,感兴趣的朋友一起看看吧
2024-03-03

React中Redux Hooks的使用详解

目录

Redux Hooks

Redux中Hooks介绍

Redux中Hooks使用

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具