Redux Toolkit 是 Redux 官方推出的高效开发工具集，旨在简化 Redux 核心逻辑编写、减少样板代码，同时内置常用中间件与最佳实践，大幅提升 React 项目中状态管理的开发效率。本文将从实战角度，完整讲解 Redux Toolkit 在 React 项目中实现多模块状态管理、同步 / 异步状态更新的核心流程。
文档核心功能说明
本文围绕 Redux Toolkit 实现以下核心功能，覆盖 React 项目中状态管理的常见场景：
-
多模块状态拆分：将用户（user）、商品（goods）状态拆分为独立 Slice，实现状态模块化管理，降低代码耦合度；
-
同步状态更新：基于 createSlice 快速定义状态修改的 reducer 与 action，简化同步状态更新逻辑；
-
异步状态处理：结合 Redux Toolkit 内置的 thunk 中间件，实现异步 Action（如延迟修改商品价格）；
-
全局状态注入与消费：通过 configureStore 合并多模块 reducer，配合 react-redux 的 Provider 实现全局状态注入，再通过 useSelector/useDispatch 完成组件内状态读取与修改；
-
组件化状态使用：在子组件中消费全局状态，并触发状态更新，实现组件与全局状态的双向交互。
安装
npm i react-redux @reduxjs/toolkit
核心代码实现
用户状态模块
实现用户姓名、年龄、性别等基础信息的定义与同步修改，每个 reducer 对应一个状态更新逻辑，action 自动生成无需手动定义。
// user.js
import { createSlice } from '@reduxjs/toolkit'
const userSlice = createSlice({
name: 'user-slice',
initialState: {
name: '张三',
age: 18,
gender: '男'
},
reducers: {
setName(state, action) {
state.name = action.payload
},
setGender(state, action) {
state.gender = action.payload
},
setAge(state, action) {
state.age = action.payload
}
}
})
export default userSlice
商品状态模块
除商品名称、价格的同步修改外，新增异步 Action 实现延迟修改商品价格，演示 Redux Toolkit 处理异步逻辑的极简方式。
// goods.js
import { createSlice } from '@reduxjs/toolkit'
const goodsSlice = createSlice({
name: 'goods-slice',
initialState: {
name: '苹果',
price: 100
},
reducers: {
setName(state, action) {
state.name = action.payload
},
setPrice(state, action) {
state.price = action.payload
}
}
})
export const { setName, setPrice } = goodsSlice.actions
// 异步action
export const setPriceAsync = () => async (dispatch,getState) => {
setTimeout(() => {
dispatch(setPrice(200))
},2000)
}
export default goodsSlice
全局 Store 配置
合并多模块 reducer，创建全局状态仓库，Redux Toolkit 自动配置 devTools、thunk 等中间件，无需手动配置。
// index.js
import { configureStore } from '@reduxjs/toolkit'
import userSlice from './user'
import goodsSlice from './goods'
const store = configureStore({
reducer: {
user: userSlice.reducer,
goods: goodsSlice.reducer
}
})
export default store
全局状态注入（入口文件）
通过 react-redux 的 Provider 组件将 Store 注入整个应用，使所有组件可访问全局状态。
// main.js
import store from './stores/index'
ReactDom.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
)
组件中消费与修改状态
在子组件中通过 useSelector 读取全局状态，通过 useDispatch 触发 Action 修改状态，实现组件与全局状态的交互。
// Child.jsx
import { useSelector, useDispatch } from 'react-redux'
import { setName, setPrice } from '../stores/goods'
const Child = () => {
const user = useSelector(state => state.user)
const goods = useSelector(state => state.goods)
const dispatch = useDispatch()
return (
<div>
<h1>子组件</h1>
<h2>用户：{user.age}</h2>
<h2>商品：{goods.name}</h2>
<button onClick={() => dispatch(setPrice(100))}>修改价格</button>
</div>
)
}
export default Child
根组件引入子组件
function App() {
return (
<div className="App">
<h1>App</h1>
<Child />
</div>
)
}
export default App
本文示例适用于 React 中、大型项目的全局状态管理场景，如用户信息、商品数据、全局配置等跨组件共享的状态；尤其适合需要处理异步状态（如接口请求、延迟操作）的场景，相比原生 Redux 大幅减少代码量，提升维护性。
通过以上实现，可快速掌握 Redux Toolkit 的核心使用方式，解决 React 项目中全局状态管理的痛点，提升开发效率与代码质量。
