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

redux Tookit的配置流程

news 2026/8/27 6:32:30

需要安装插件：npm install @reduxjs/toolkit

然后创建store根目录，用来做总的store

1. `store`根目录

用途：集中管理整个应用的状态（全局状态池）。
类比：类似银行的“总行金库”，统一存放所有数据。
优势：
- 避免状态分散在组件中，便于维护和调试。
- 支持跨组件共享数据（如用户登录状态）。

2. `modules`子目录

用途：按业务功能拆分状态模块（分治思想）。
文件示例：
- counterStore.js：管理计数器状态（如count值）。
- channelStore.js：管理频道列表数据（如channels: []）。
优势：
- 模块化开发，降低复杂度。
- 团队协作时可按功能分配开发任务。

首先在子模块中定义方法并且传出对应reducer以供生成store：

reducer由slice（切片）生成：const reducer = slice.reducer;

slice（切片）由createSlice生成：const Slice = createSlice（里面装填该模块的state和修改该模块state的方法）

createSlice（）传的参数为一个对象，对象必须包含：name：定义切片的名称，并且生成action类型的前缀；initialState：定义该切片的初始状态；reducers：包含全部reducer函数的对象

import { createSlice } from "@reduxjs/toolkit"; const counterStore = createSlice({ name: "counter", // 初始化state initialState: { count: 0, }, // 修改状态的方法 同步方法 支持直接修改 reducers: { increment(state) { state.count++; }, decrement(state) { state.count--; }, }, }); // 解构出来actionCreater函数 const { increment, decrement } = counterStore.actions; // 获取reducer const reducer = counterStore.reducer; // 以按需导出的方式导出actionCreater export { increment, decrement }; // 以默认导出的方式导出reducer export default reducer;

*在这些module子目录中的业务功能是先用slice来写，然后把其业务功能如：{ increment, decrement }导出，然后还需要为上层的store根目录提供reducer来创建store，最上层用到的还是store*

然后在index.js中生成store传出：

首先必须先获取到configureStore方法：

这个是增强版本的creatStore

// 第1行：从Redux Toolkit导入核心API import { configureStore } from "@reduxjs/toolkit";

完整代码：

import { configureStore } from "@reduxjs/toolkit"; //导入子模块reducer，因为默认导出就是reducer = counterStore.reducer，所以counterReducer知识命名 import counterReducer from "./modules/counterStore"; const store = configureStore({ reducer: { counter: counterReducer, }, }); //将创建好的 Store 实例导出，供应用最上层（如 main.jsx）通过 Provider 注入到 React 组件树中。 export default store;

那么就是说，先对模块A进行命名、状态初始化、方法定义，然后用createslice来创建他的slice实例，然后调出slice实例中的reducer（关键）和action（修改方法），然后将模块A的reducer给到总的configureStore来创建总的store再后续

接下来为React注入store后就可以使用了

react-redux负责把Redux和React链接起来，内置Provider组件通过store参数把创建好的store实例注入到应用中，链接正式建立。

在react项目层的index.js中进行绑定

import { Provider } from "react-redux"; import store from "./store";

使用provide组件将这个根组件进行包裹，并且定义store = {store}

<Provider store={store}> <App /> </Provider>

完整：index.js:

import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { Provider } from "react-redux"; import store from "./store"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

那如何在React组件中使用store的数据

需要用到一个钩子函数——useSelector，可以把store中的数据映射到组件中

import logo from "./logo.svg"; import "./App.css"; import { useDispatch, useSelector } from "react-redux"; function App() { //把store中的数据映射到组件中 const { count } = useSelector((state) => state.counter); return ( <div className="App"> <div>{count}</div> </div> ); } export default App;

那React组件如何修改store中的数据

React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，它的作用是生成提交action对象的第三patch函数

还需将原定义在各个模块中的方法导入到App.js中，方便直接调用

import logo from "./logo.svg"; //将用于调用方法的useDispa导入 import { useDispatch, useSelector } from "react-redux"; //将修改方法导入进来 import { increment, decrement } from "./store/modules/counterStore"; function App() { //把store中的数据映射到组件中 const { count } = useSelector((state) => state.counter); const dispatch = useDispatch(); return ( <div className="App"> <button onClick={() => dispatch(increment())}>+</button> <div>{count}</div> <button onClick={() => dispatch(decrement())}>-</button> </div> ); } export default App

总流程：

也就是说使用store的过程是，先在总的index.js中使用provide宣告全局这个总的store，然后包裹全局。再去到特定需要使用store的组件，然后调用useSelect方法获取到对应的状态的值，如果需要修改的话要把一开始定义状态模块的方法action一起导入到里面去，然后使用usedispatch方法生成dispatch方法，然后再dispatch里面调用对应的action的方法就可以实现对状态的操作了！！

先对模块 A 使用createSlice进行命名、状态初始化、reducer 方法定义，创建它的 slice 实例；

然后导出 slice 实例中的reducer（核心）和actions（修改方法）；

接着把模块 A 的reducer配置到configureStore中，创建全局总 store；

在项目入口文件（如 index.js）中，使用Provider组件包裹根组件，并传入总 store，实现 store 全局可用；

在需要使用状态的组件里：