Redux

Redux 是什么

Redux 是一个用于可预测、可维护的全局状态管理的 JavaScript 库。它帮助开发者编写行为一致、可运行于客户端/服务端/原生环境、且易于测试的应用，并提供时间旅行调试等优秀的开发体验。

Redux 核心非常小巧（含依赖约 2kB），可搭配 React 或任意其他视图库使用，并拥有丰富的插件生态。

核心思想

• 整个应用的全局状态存放在一个 store 的对象树中
• 改变状态的唯一方式是创建描述「发生了什么」的 action 对象并 dispatch 到 store
• 通过纯函数 reducer 根据旧状态与 action 计算出新状态

推荐写法：Redux Toolkit

官方推荐使用 Redux Toolkit 编写 Redux 逻辑，它封装了核心库并内置最佳实践，简化大部分任务、避免常见错误。

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())

借助 Immer，reducer 中可以写「看似可变」的逻辑，实际仍产出不可变的新状态。

快速开始

React + Redux Toolkit 的常见组合：

npm install @reduxjs/toolkit react-redux

也可使用官方 Vite 模板或 Next.js 的 with-redux 模板快速创建示例应用。

学习路径

• Redux Essentials：自顶向下，教你「如何正确使用 Redux」，推荐先读
• Redux Fundamentals：自底向上，从第一性原理讲清 Redux 如何工作
• 官方文档：https://redux.js.org ，Toolkit 文档：https://redux-toolkit.js.org

使用建议

Redux 并非所有项目都必需。当出现以下情况时值得考虑：

• 有合理数量的数据随时间变化
• 需要状态的单一数据源
• 把所有状态放在顶层组件已不再够用

官方也提醒：不要因为别人说该用就用，先理解其收益与取舍。