首先进行安装toolkit react-redux

npm install @reduxjs/toolkit react-redux

Redux Toolkit 示例

src目录下新建stroe文件夹,store文件夹下新建index.jsmodules(模块)文件夹

src >> stroe >> index.js / mudules

1. 创建 Redux Store(redux仓库)
  • 在我们新建的store文件夹下的index.js里粘贴即可
import {
configureStore } from '@reduxjs/toolkit' // 使用configureStore创建一个redux仓库 // 并自动配置了 Redux DevTools 扩展 ,这样你就可以在开发时调试 store export default configureStore({
// 此时我们还没有写入 reducer 后面这里再写入,有一个就写一个,也可以写入多个,在reducer大括号里写入 reducer: {
}, })
2. 为 React 提供 Redux Store
  • 新建完仓库之后,并没有与React产生关联,所以我们需要产生关联,这样React才能进行使用Toolkit

index.js中进行关联

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
// 引入数据仓库,只有文件夹,默认会引入文件夹下的index.js
import store from './store'
// 结构出提供者组件,它有一个stroe属性,属性值就是我们要传递的值
import {
Provider } from 'react-redux' ReactDOM.render( {
/* 包裹App组件,这样全局都能进行使用 */} <Provider store={
store}> <App /> </Provider>, document.getElementById('root') )
3. 创建 Redux State Slice(切片)
  • 切片可以理解为模块

  • modules文件夹下新建counterSlice.js

import {
createSlice } from '@reduxjs/toolkit' // 创建react数据切片 利用createSlice() export const counterSlice = createSlice({
// 类似于vuex的命名空间,必须是唯一值 // 与pinia的defineStore()的第一个参数一个意思,都是唯一值,做区分 name: 'counter', // 定义变量 initialState: {
value: 0, }, // 定义方法 reducers: {
// 方法接收2个参数,第一个参数是变量,第二个参数是载荷(也就是使用方法传入的参数) // +1 increment: (state) => {
// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它 // 并不是真正的改变状态值,因为它使用了 Immer 库 // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的 // 不可变的状态 // 大致意思就是可以直接修改原先的值,它会产生新的不可变状态,放心大胆修改 state.value += 1 }, // -1 decrement: (state) => {
state.value -= 1 }, // 这种是使用action的时候传参的 incrementByAmount: (state, action) => {
state.value += action.payload }, }, }) // 每个 case reducer 函数会生成对应的 Action creators 需要进行导出,这样组件使用方法或者变量的时候,直接引入就可了 export const {
increment, decrement, incrementByAmount } = counterSlice.actions export default counterSlice.reducer
4. 将 Slice Reducers 添加到 Store 中

下一步,我们需要从计数切片中引入 reducer 函数,并将它添加到我们的 store 中。通过在 reducer 参数中定义一个字段,我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新

import {
configureStore } from '@reduxjs/toolkit' // 引入 reducer 函数 import counterSlice from './modules/counterSlice' // 使用configureStore创建一个redux仓库 // 并自动配置了 Redux DevTools 扩展 ,这样你就可以在开发时调试 store export default configureStore({
reducer: {
// 告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新 counter: counterSlice, }, })
5. 在 React 组件中使用 Redux 状态和操作

现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。我们可以使用 useSelector 从 store 中读取数据,使用 useDispatch dispatch actions。

import React from 'react'
import {
useSelector, useDispatch } from 'react-redux' import {
decrement, increment } from '../store/modules/counterSlice' export default function Person() {
const count = useSelector((state) => state.counter.value) const dispatch = useDispatch() return ( <div> <h2>Person -- {
count}</h2> <button // aria-label="Increment value" onClick={
() => dispatch(increment())} > 增加 </button> <button // aria-label="Decrement value" onClick={
() => dispatch(decrement())} > 减少 </button> </div> ) }
如何处理异步任务

counterSlice.js

import {
createSlice } from '@reduxjs/toolkit' // 创建react数据切片 利用createSlice() export const counterSlice = createSlice({
// 类似于vuex的命名空间,必须是唯一值 // 与pinia的defineStore()的第一个参数一个意思,都是唯一值,做区分 name: 'counter', // 变量 initialState: {
value: 0, }, // 方法 reducers: {
// 方法接收2个参数,第一个参数是变量,第二个参数是载荷(也就是使用方法传入的参数) increment: (state) => {
// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它 // 并不是真正的改变状态值,因为它使用了 Immer 库 // 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的 // 不可变的状态 state.value += 1 }, decrement: (state) => {
state.value -= 1 }, incrementByAmount: (state, action) => {
state.value += action.payload }, // 获取数据的异步请求方法 getD: (state, action) => {
fetch('https://cnodejs.org/api/v1/topics') .then((response) => response.json()) .then((res) => console.log(res)) }, }, }) // 每个 case reducer 函数会生成对应的 Action creators export const {
increment, decrement, incrementByAmount, getD } = counterSlice.actions // 定义异步任务,参数写道外层函数上,利用闭包 export const getData = (payload) => {
// 内层函数,第一个参数是提交任务的dispatch,第二个参数是获取state的方法 return (dispatch, getState) => {
// 获取state中的数据 console.log(getState().counter) // 调用方法 dispatch(getD()) } } export default counterSlice.reducer

使用

import React from 'react'
import {
useSelector, useDispatch } from 'react-redux' import {
decrement, increment, getData } from '../store/modules/counterSlice' export default function Person() {
const count = useSelector((state) => state.counter.value) const dispatch = useDispatch() return ( <div> <h2>Person -- {
count}</h2> <button onClick={
() => dispatch(increment())}>增加</button> <button onClick={
() => dispatch(decrement())}>减少</button> <button onClick={
() => dispatch(getData())}>获取数据</button> </div> ) }

在这里插入图片描述

原文链接:https://blog.csdn.net/qq_52845451/article/details/129833160

最后修改:2023 年 10 月 30 日
如果觉得我的文章对你有用,请随意赞赏