📦Redux 是什么？

Source: Dev.to

如果你正在学习前端开发，尤其是使用 React，可能已经听说过 Redux。它起初可能让人感到困惑，但核心思想其实很简单。

什么是 Redux？

Redux 是一个状态管理库，提供一个单一的、中心化的地方来存储和管理整个应用使用的数据。可以把它想象成一个大储物箱，任何组件都可以读取或写入，从而消除重复的 prop‑drilling（属性层层传递）。

核心概念

Store（存储）

store 保存整个应用的状态。

// 示例状态
{
  count: 0
}

你可以把 store 想象成仓库、银行保险箱或记忆盒子，所有数据都存放在那里。

Action（动作）

Action 是一个普通的 JavaScript 对象，用来描述 要发生什么。

// 示例动作
{
  type: "INCREMENT"
}

动作就像在餐厅下单、点击按钮或发送信息一样。

Reducer（简化器）

Reducer 是一个纯函数，决定 在收到动作后状态如何变化。

function counterReducer(state = { count: 0 }, action) {
  if (action.type === "INCREMENT") {
    return { count: state.count + 1 };
  }
  return state;
}

可以把 reducer 想象成厨师，根据收到的订单（action）准备出结果。

数据流示例

当你点击按钮增加计数器时：

1. 用户点击按钮 🖱️
2. Action 被派发 📢 ({ type: "INCREMENT" })
3. Reducer 接收该动作 🔁 并返回新的状态
4. Store 更新其数据 🏬
5. UI 自动重新渲染 🎉

这种单向流动（action → reducer → store → UI）被称为 单向数据流。

使用 Redux 的好处

• ✅ 集中管理大型应用的状态
• ✅ 避免在众多组件之间进行 prop drilling
• ✅ 让状态变化可预测且可追踪
• ✅ 使用 Redux DevTools 等工具简化调试
• ✅ 保持项目结构清晰有序

何时使用 Redux

Redux 在以下项目中表现出色：

• 应用规模较大，许多组件共享相同数据
• 状态逻辑变得复杂或涉及众多交互
• 需要可靠的方式来追踪和调试状态变化

对于非常小的应用，Redux 可能是多余的开销。

Redux Toolkit

Redux Toolkit 是编写 Redux 逻辑的现代、推荐方式。它提供的工具让 Redux：

• 更容易配置 😊
• 更简洁、更清晰 ✨
• 减少样板代码 🧹

使用 Toolkit，你可以用更少的代码创建 slice、reducer 和异步 thunk。

小结

• 🧠 Store = 中央数据容器
• 📢 Action = 对要发生的事情的描述
• 🔁 Reducer = 生成新状态的逻辑
• 🏬 Redux = 将所有部分联系在一起的整体管理器

从计数器或待办事项应用等小例子开始，练习整个流程，你很快就能熟悉 Redux。持续构建项目，Redux 很快就会成为你 React 工具箱中的自然组成部分。 🚀