React 集中状态管理方案

上一篇文章中介绍了 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-redux

2. 创建 Action

// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

3. 创建 Reducer

// reducer.js
const initialState = { count: 0 };const counterReducer = (state =