文章目录ReduxJavaScript 全局状态管理的标准方案1、为什么需要状态管理2、核心概念3、Redux Toolkit4、怎么接入项目5、适用场景ReduxJavaScript 全局状态管理的标准方案Redux 在 GitHub 上已经拿到 61,511 Star 了。这是一个 JavaScript 状态管理库专门解决一个问题让应用的全局状态可预测、可维护。不管你用 React、Vue 还是其他框架它都能接进去。1、为什么需要状态管理写前端应用时数据在组件之间传递是件麻烦事。父子组件传 props跨层级传 context兄弟组件传数据还得借助共同父级。组件一多数据流就乱了。Redux 的思路很直接把所有状态放到一个全局的 store 里组件从 store 读数据要改数据就 dispatch 一个 actionreducer 根据 action 计算出新的状态。整个过程是纯函数驱动的状态变化可追踪、可回溯。2、核心概念Redux 的设计围绕三个概念Store整个应用的状态树存在一个对象里。Action描述发生了什么的普通对象。状态的唯一变化来源。Reducer纯函数接收旧状态和 action返回新状态。不直接修改原状态而是生成一份新的。这套模型的好处是数据流严格单向。出了 bug顺着 action 和 reducer 往回查就行不用在组件树里到处打断点。3、Redux Toolkit现在官方推荐用 Redux Toolkit 来写 Redux 逻辑。它把创建 store、定义 reducer、处理异步这些常见操作封装了一遍代码量少了很多。import{createSlice,configureStore}fromreduxjs/toolkitconstcounterSlicecreateSlice({name:counter,initialState:{value:0},reducers:{incremented:state{state.value1},decremented:state{state.value-1}}})exportconst{incremented,decremented}counterSlice.actionsconststoreconfigureStore({reducer:counterSlice.reducer})store.dispatch(incremented())// {value: 1}用 createSlice 定义逻辑用 configureStore 创建 store三五行代码就能跑起来。底层用了 Immer 库reducer 里写看起来像修改的代码实际生成的是新对象。4、怎么接入项目安装npminstallreduxjs/toolkit react-redux如果是 React 项目官方有现成的模板。用 Vite 的话npx degit reduxjs/redux-templates/packages/vite-template-redux my-app用 Next.js 的话npx create-next-app--examplewith-redux my-app模板里已经把 store 配置、Provider 注入、示例组件都写好了装完直接改就行。5、适用场景Redux 不是什么情况都要用。官方文档里也说了写之前先想想是不是真需要。适合用 Redux 的场景应用里有多处共享的状态这些状态会随时间变化而且需要一个统一的地方来管理它们。比如用户登录信息、购物车数据、多页面之间的筛选条件。如果应用很简单组件之间的数据传递用 props 和 context 就够了那就不需要加这层抽象。Redux 的价值在于应用复杂到一定程度之后帮你把数据流理清楚。这个库核心只有 2kB加上依赖也不大。生态里有一堆官方维护的周边包react-redux 负责和 React 对接redux-thunk 处理异步逻辑redux-devtools 提供时间旅行调试器。整个工具链比较完整。方维护的周边包react-redux 负责和 React 对接redux-thunk 处理异步逻辑redux-devtools 提供时间旅行调试器。整个工具链比较完整。