本篇文章带大家聊聊redux hooks的使用细节，希望对大家有所帮助！
redux hooksredux中hooks介绍在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux库中的connect：
但是这种方式必须使用高阶函数结合返回的高阶组件;
并且必须编写:mapstatetoprops和 mapdispatchtoprops映射的函数, 具体使用方式在前面文章有讲解;【相关推荐：redis视频教程、编程视频】
在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.jsimport { 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.actionsexport default counterslice.reducer
// store/index.jsimport { 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'// 子组件homeconst 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> )})// 根组件appconst 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'// 子组件homeconst 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> )})// 根组件appconst 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
更多编程相关知识，请访问：编程教学！！
以上就是一文详解redux hooks的使用细节的详细内容。