当前位置：首页 > news >正文

React项目的状态管理：Redux Toolkit

news 2025/7/8 15:01:58

1、搭建环境

2、Redux Toolkit 包含了什么

3、使用示例

（1）创建user切片

（2）合并切片得到store

（3）配置store和使用store

使用js来编写代码，方便理解一些

1、搭建环境

首先，先要新建一个react项目，有了react项目之后就安装好依赖

npm install @reduxjs/toolkit

npm install react-redux

然后在src文件目录下新建一个名为store/stores文件夹（理论上其他也行，所有开发者都约定好即可），有关状态管理的数据都会存放在这里

这只是一个实例，store这个命名算是约定熟成，虽然可以起个别的名字，但是为了方便团队间合作约定写成store更容易让代码更好维护管理以及新开发者迅速找到对应位置。跟components文件夹放组件一样的道理。

2、Redux Toolkit 包含了什么

在中文版官方文档中可以直接看到以下的话语

看起来有点难懂，但是没关系我们先知道一些知识就好了，接下来是redux toolkit使用示例

3、使用示例

（1）创建user切片

在前面写好的store文件下新建一个user.js文件夹：

主要使用的是createSlice

import { createSlice } from "@reduxjs/toolkit"const useSlice = createSlice({name: "user",initialState: { // 初始状态name: "张三",age: 18,},reducers: { // 定义方法setName (state, action) {state.name = action.payload},setAge(state, action) {state.age = action.payload}}
})export const { setName, setAge } = useSlice.actions // 导出方法
export default useSlice.reducer // 导出reducer

在react的状态当中，有一个规则是数据不可变，大白话讲就是这个state不应该直接修改，所以在代码中会直接生成一个新数据去覆盖它。遵循这个规则的话就是会写成setAge这个样子：

import { createSlice } from "@reduxjs/toolkit"const useSlice = createSlice({name: "user",initialState: { // 初始状态name: "张三",age: 18,},reducers: { // 定义方法setName (state, action) {state.name = action.payload},setAge(state, action) {return {...state,age: action.payload}}}
})export const { setName, setAge } = useSlice.actions // 导出方法
export default useSlice.reducer // 导出reducer

redux toolkit支持上面两种写法，所以写哪一种看个人爱好了

还可以继续写不同的文件在store里，对状态进行分类存放，对不同的分类都称为切片

在这里写一下，为什么在user.js要有以下两行代码：

export const { setName, setAge } = useSlice.actions // 导出方法
export default useSlice.reducer // 导出reducer

直观感受就是很多余，为什么需要这样编写

1. export const { setName, setAge } = useSlice.actions

作用：导出该 slice 的 action creators（setName 和 setAge），供组件或其他地方调用。

为什么需要单独导出？

在组件中，你需要通过 dispatch(setName("Alice")) 这样的方式来触发状态更新。如果这里不导出这些 actions，外部代码就无法使用它们。

虽然可以直接通过 useSlice.actions.setName 访问，但直接解构并导出会更清晰，方便调用。

        示例：

        // 在其他组件中
        import { setName } from './userSlice';
        dispatch(setName("Bob")); // 直接使用导出的 action

2. export default useSlice.reducer
作用：导出 slice 的 reducer，供 Redux store 合并使用。
为什么需要默认导出？
Redux store 需要组合所有 slice 的 reducer（比如通过 combineReducers）。通常会在 store 的配置文件中导入各个 slice 的 reducer：
// store.js
import userReducer from './userSlice'; // 这里导入的就是 useSlice.reducer
const rootReducer = combineReducers({user: userReducer,// 其他 reducer...
});
默认导出是为了简化导入语法（import userReducer from './user'），符合 Redux 的约定俗成

如果不这样写会怎样？

如果不导出 actions，外部代码需要直接访问 useSlice.actions.setName，这会增加耦合性（调用方需要知道 slice 的内部结构）。
如果不默认导出 reducer，store 配置时需要写更长的路径（比如 import { reducer as userReducer } from './user'），不够简洁

总结

这两行代码是 Redux Toolkit 的标准模式：

导出 actions：方便组件调用
导出 reducer：方便 store 组合

虽然看起来冗余，但这是为了职责分离和代码可维护性。如果项目中有多个 slice，这种模式能保持一致性，减少认知负担

（2）合并切片得到store

将前面写好的切片合并，一般是在store文件夹下新建一个index.js文件来合并切片，这里主要使用的是configureStore，代码如下：

import { configureStore } from '@reduxjs/toolkit';
import User from './user';export default configureStore({reducer: {user: User.reducer,// 有多少切片就一个个写进来即可}
})

（3）配置store和使用store

（1）配置

在index.jsx文件或者main.jsx文件进行配置

先添加以下代码，将上面的index.js文件导入进去：

import store from './store';

然后用Provider组件包裹住<APP />，并且给属性绑定store，示例如下：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(// <React.StrictMode><Provider store={store}><App /></Provider>// </React.StrictMode>
);

（2）使用

在需要使用状态的组件中进行编写代码，用到useSelector来拿数据，useDispatch来调用方法

import React from "react";
import { useSelector, useDispatch } from "react-redux";const PageOne = () => {const user = useSelector((state) => state.user);const dispatch = useDispatch();return (<div><h1>Page One</h1><div>{user.age}</div><button onClick={() => {dispatch({ type: "user/setAge" , payload: user.age + 1});}}>年龄+1</button></div>)
}export default PageOne;

但是这样的话这个 dispatch({ type: "user/setAge" , payload: user.age + 1})不够优雅，我们可以换一个优雅体面的方式

先将user引入组件中，这样就可以更方便的使用了，跟前面解释export const { setName, setAge } = useSlice.actions的写法的原因给callback了

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import userSlice from "../../stores/user"; // 引入userSliceconst { setName, setAge } = userSlice.actions; // 解构出actions中的方法const PageOne = () => {const user = useSelector((state) => state.user);const dispatch = useDispatch();return (<div><h1>Page One</h1><div>{user.age}</div><button onClick={() => {dispatch(setName("李四"));dispatch(setAge(user.age + 1));}}>年龄+1, 改名李四</button></div>)
}export default PageOne;

好了，toolkit的用法基本就是这样，学会了就可以在编程中一边练一边不断学习更高阶的用法了，冲冲冲

查看全文

http://www.lqws.cn/news/179317.html