React新手村：一步步掌握前端开发利器Day5
React中的状态管理库
- 前言
- 一、状态管理库的概念是什么？
- 二、 Redux 和 ReduxToolkit 的使用
- 1.安装状态库 可指定版本
- 2.定义状态库
- 3.在项目的index根页面引入并使用状态库
- 4.自定义状态库片段
- 5.向状态管理库片段的方法中传参并调用
- 6.状态库中的异步方法
- 总结
前言
在 React 开发中，组件间的状态共享与管理是核心问题之一。React 自身仅提供了组件内的useState和跨组件的useContext等基础状态管理能力，当项目规模扩大（如多组件共享状态、异步操作更新状态、状态变更需追溯）时，基础方案会出现代码冗余、状态流转不清晰、调试困难等问题。
状态管理库的出现正是为了解决这些痛点：Redux 作为 React 生态中经典的状态管理方案，通过单向数据流规范状态的修改逻辑；而 Redux Toolkit（RTK）则是官方推出的简化版，大幅降低了 Redux 的使用成本。本文将从基础概念到实际应用，逐步讲解 Redux 和 Redux Toolkit 的核心用法，包括同步状态修改、传参修改状态、异步状态更新等高频场景，帮助开发者快速掌握 React 中主流的状态管理方式。
提示：以下是本篇文章正文内容，下面案例可供参考
一、状态管理库的概念是什么？
- React端：没有内置状态管理，主流方案是 Redux（经典）和 ReduxToolkit（RTK，官方推荐简化版），也有轻量方案如 MobX、Zustand。核心是单向数据流，通过 action、reducer、dispatch 来修改和同步状态。
- Vue端：官方推荐 Pinia（新一代），替代 Vuex。天然支持响应式，直接修改状态即可触发更新，无需额外中间层。
二、 Redux 和 ReduxToolkit 的使用
1.安装状态库 可指定版本
- npm install react-redux@8.0.0 （指定版本为8.0.0）
- npm install @reduxjs/toolkit@1.9 （指定版本为1.9）
2.定义状态库
- 在 src 文件夹下创建 store 文件夹
- 在 store 文件夹下创建 index.jsx 页
- 在 index.jsx 页面中定义状态库
- 抛出状态库 store
// 引入状态库创建方法
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/user';
const reducer = (state, action) => {
return {
user: "蜡笔小新",
}
}
const store = configureStore({
reducer
})
export default store;
3.在项目的index根页面引入并使用状态库
// 引入
import store from './store';
// 引入注入状态库的方法：Provider是react-redux提供的上下文容器，让所有子组件能访问store
import { Provider } from 'react-redux';
// 使用
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
{/* 将store注入整个应用，所有子组件可通过hooks访问store */}
<Provider store={store}> <App /></Provider>
</React.StrictMode>
);
这样我们就能在 redux 插件中看到我们状态库中储存的数据啦~
4.自定义状态库片段
- 在 store 文件夹下创建 slices 文件夹 用于存储状态库
- 在 slices 文件夹中创建 js 文件 并定义不同的状态库片段
// 引入创建方法：createSlice是RTK核心API，简化reducer和action的创建
import { createSlice } from "@reduxjs/toolkit";
// 定义并抛出切片字段
export const userSlice = createSlice({
name:'user1', // 指定状态片段的名称 类似于id，会作为action type的前缀
initialState:{ //初始化状态：定义该切片的初始数据
user:"蜡笔小新"
},
// 方法：reducer函数集合，用于修改状态
reducers:{
/**
* 每一个reducer函数 都会接受两个参数
* state 表示当前切片的状态（RTK内置Immer，可直接修改）
* action 一个对象
* a.type 自动生成的动作类型，格式为"name/reducerName"
* b.payload 传递的参数（载荷）
* */
setName(state,action) {
state.user = '哆啦A梦'; // 直接修改state，Immer会自动转换为不可变更新
}
}
})
// 导出reducer，供store注册
export default userSlice.reducer;
// 导出action creator：自动根据reducer生成，用于dispatch触发状态修改
export const {setName} = userSlice.actions;
- 在 store 文件夹下的 index 根页中引入 状态库片段文件
// 引入状态库创建方法
import { configureStore } from '@reduxjs/toolkit';
// 引入切片文件
import userReducer from './slices/user';
const store = configureStore({
reducer:{
users: userReducer
}
})
export default store;
- 在任意页面引入并使用
// 引入状态库特有的两个钩子
// useSelector 从store中提取状态 initialState
// useDispatch 调用状态库中的方法
import { useSelector,useDispatch } from "react-redux";
// 引入状态库片段中定义的方法
import { setName } from "../store/slices/user";
function Demo1() {
// 获取dispatch方法
const dispatch = useDispatch();
// 从store中获取users切片的状态
const user = useSelector(({users}) => users);
console.log(user,'user')
return <div>
<h1>demo1</h1>
<h3>我叫{user.user}</h3>
<button onClick={()=>{
// 触发action，修改状态
dispatch(setName());
}}>修改名字</button>
</div>
}
export default Demo1;
这样便可以实现点击按钮调用状态库中的方法来修改名字了 效果如下
5.向状态管理库片段的方法中传参并调用
上面我们已经掌握了基本的方法调用，下面让我们一起实现一个功能：当用户在页面输入框输入数字，然后点击按钮，实现对年龄的修改。
- 在页面中添加按钮和输入框 并用onChange事件监听用户在输入框输入的值。
// 组件内状态，用于暂存输入框的值
const [old,setOld] = useState('')
<input type="text" onChange={(e)=>setOld(e.target.value)}/>
- 在状态管理库的片段中定义方法
// 用 action 接收参数，并直接解构出参数 payload
setAge(state, { payload }) {
state.age = payload; // payload为传递的年龄参数
}
- 在状态管理库的片段中抛出方法
export const { setName,setAge } = userSlice.actions;
- 在页面中引入方法
import { setName,setAge } from "../store/slices/user";
- 在页面中的按钮上绑定点击事件并通过 useDispatch 触发方法
<button onClick={()=>{
// 触发setAge，并传递输入框的值作为payload
dispatch(setAge(old))
}}>修改年龄</button>
页面中完整代码如下
import { useSelector,useDispatch } from "react-redux";
import { setName,setAge } from "../store/slices/user";
import { useState } from "react";
function Demo1() {
const [old,setOld] = useState('')
const dispatch = useDispatch();
const user = useSelector(({users}) => users);
console.log(user,'user')
return <div>
<h1>demo1</h1>
<h3>我叫{user.user}</h3>
<button onClick={()=>{
dispatch(setName());
}}>修改名字</button>
<br /><br />
<h3>今年{user.age}岁</h3>
<input type="text" onChange={(e) =>setOld(e.target.value)} />
<button onClick={()=>{
dispatch(setAge(old))
}}>修改年龄</button>
</div>
}
export default Demo1;
6.状态库中的异步方法
上面我们分别了解了在状态库片段中需要传递参数和不需要传递参数的同步方法的调用，下面我们一起来了解状态库中异步方法的使用吧~
- 在页面中添加按钮和输入框 并用onChange事件监听用户在输入框输入的值。
// 暂存输入框的年龄值
const [old,setOld] = useState('')
<input type="text" onChange={(e)=>setOld(e.target.value)}/>
- 在状态管理库的片段中定义方法并抛出
// 写法1：普通函数形式
// export function asyncSetAge(x) {
// // thunk函数：接收dispatch和getState，支持异步操作
// return (dispatch,getState) => {
// setTimeout(()=>{
// dispatch(setAge(x));
// },2000)
// }
// }
// 写法2：箭头函数形式（更简洁）
export const asyncSetAge = (x) => (dispatch, getState) => {
// getState：获取当前store中所有状态，可用于异步操作中依赖其他状态
// console.log(getState())
// 模拟异步操作（如接口请求）
setTimeout(() => {
// 异步操作完成后，dispatch同步action修改状态
dispatch(setAge(x));
}, 2000)
}
- 在页面中引入方法
import { setName,setAge,asyncSetAge } from "../store/slices/user";
- 在页面中的按钮上绑定点击事件并通过 useDispatch 触发方法
<button onClick={() => {
dispatch(asyncSetAge(old))
}}>2秒后修改年龄</button>
这样就可以实现异步修改年龄的操作啦~
总结
以上就是今天要讲的内容，本文围绕 React 中主流的状态管理方案 Redux 及 Redux Toolkit 展开，从基础概念到实际应用，讲解了状态库的核心使用场景：
- Redux Toolkit 通过configureStore创建 store、createSlice拆分状态片段，大幅简化了原生 Redux 的冗余代码，且内置 Immer 支持直接修改 state，降低了不可变数据的操作成本；
- 组件中可通过useSelector获取状态、useDispatch触发 action，同步 action 可直接修改状态，传参时通过action.payload接收参数；
- 异步操作可通过 thunk 函数实现，在异步逻辑（如定时器、接口请求）完成后，再 dispatch 同步 action 更新状态，符合 Redux 单向数据流的核心原则。
Redux Toolkit 作为 React 官方推荐的状态管理方案，既保留了 Redux 可预测、可调试的优势，又优化了开发体验，是中大型 React 项目中状态管理的优选方案。除本文讲解的基础用法外，Redux Toolkit 还提供createAsyncThunk、createEntityAdapter等高级 API，可进一步简化异步请求、列表状态管理等场景，开发者可根据实际业务需求深入学习。
本文地址：https://www.yitenyun.com/4877.html
上一篇：服务器的IO性能怎么看？
下一篇：ARMv8内存模型与屏障指令详解
