网站已收录的404页面的查询网站底部友情链接
上一篇文章中介绍了 React 基础状态管理方案，React 内部提供了基础状态管理的办法，但是，如果项目逐渐趋于复杂，以上普通状态管理方案可能就略显单薄，这时我们需要需求更好的状态管理方案—集中状态管理。 集中状态其初衷是在不同组件模块中共享状态，比如以下状态适合放在集中状态里：
1. 用户登录信息数据；
2. 页面数据希望在页面中各个组件中修改；
3. 路由状态；
以下状态不适合放在集中状态里：
1. Input 框组件聚焦状态；
2. Modal 组件的打开状态；
React 应用中的状态管理是一个关键问题，尤其是在应用变得复杂时。集中状态管理方案可以帮助我们更好地管理状态变化和数据流。下面详细介绍三种常用的 React 状态管理方案：Redux、Zustand 和 Jotai。
1. Redux（建议用 redux-toolkit）
Redux 是一个非常棒的状态管理库，他提出了单向数据流，中间件等概念，能很好地进行状态结构设计。前面存储变量的对象，我们给他一个确切的定义—状态仓库，不同于对象操作的是：任何时候你都不能直接去更改状态仓库中的值，而是需要使用纯函数进行状态修改。
什么是纯函数？
1. 如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数；
2. 该函数不会产生任何可观察的副作用；
1.1. 用法
Redux 是一个流行的状态管理库，使用单一状态树来管理整个应用的状态。以下是 Redux 的基本用法：
1. 安装 Redux 和 React-Redux
npm install redux react-redux2. 创建 Action
// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });3. 创建 Reducer
// reducer.js
const initialState = { count: 0 };const counterReducer = (state =