Redux：JavaScript 全局状态管理的标准方案

Redux 在 GitHub 上已经拿到 61,511 Star 了。

这是一个 JavaScript 状态管理库，专门解决一个问题：让应用的全局状态可预测、可维护。不管你用 React、Vue 还是其他框架，它都能接进去。

1、为什么需要状态管理

写前端应用时，数据在组件之间传递是件麻烦事。父子组件传 props，跨层级传 context，兄弟组件传数据还得借助共同父级。组件一多，数据流就乱了。

Redux 的思路很直接：把所有状态放到一个全局的 store 里，组件从 store 读数据，要改数据就 dispatch 一个 action，reducer 根据 action 计算出新的状态。整个过程是纯函数驱动的，状态变化可追踪、可回溯。

2、核心概念

Redux 的设计围绕三个概念：

Store：整个应用的状态树，存在一个对象里。

Action：描述"发生了什么"的普通对象。状态的唯一变化来源。

Reducer：纯函数，接收旧状态和 action，返回新状态。不直接修改原状态，而是生成一份新的。

这套模型的好处是数据流严格单向。出了 bug，顺着 action 和 reducer 往回查就行，不用在组件树里到处打断点。

3、Redux Toolkit

现在官方推荐用 Redux Toolkit 来写 Redux 逻辑。它把创建 store、定义 reducer、处理异步这些常见操作封装了一遍，代码量少了很多。

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    incremented: state => { state.value += 1 },
    decremented: state => { state.value -= 1 }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

store.dispatch(incremented())
// {value: 1}

用 createSlice 定义逻辑，用 configureStore 创建 store，三五行代码就能跑起来。底层用了 Immer 库，reducer 里写"看起来像修改"的代码，实际生成的是新对象。

4、怎么接入项目

安装：

npm install @reduxjs/toolkit react-redux

如果是 React 项目，官方有现成的模板。用 Vite 的话：

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

用 Next.js 的话：

npx create-next-app --example with-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 提供时间旅行调试器。整个工具链比较完整。