学习 Redux 和 React-Redux

Redux 是 React 生态中最经典的状态管理库之一，而 react-redux 是它与 React 的连接桥梁。本文将从基本概念到源码原理，帮助你真正弄懂 react-redux 的工作方式和使用方法。

一、为什么需要 Redux？

• 单一数据源（store）

• 状态只读（不可直接修改 state）

• 用纯函数 reducer 描述状态变化

二、React-Redux 的核心：Provider 与 connect（或 hooks）

1. Provider 提供全局 store

2. 使用 connect 高阶组件

三、推荐方式：使用 Hooks (useSelector + useDispatch)

四、Redux 工作流程图

五、如何定义 store 与 reducer

六、React-Redux 源码核心简析

• Provider 使用 React Context 向下传递 store

• connect 或 useSelector/useDispatch 订阅 store 状态变化，触发组件更新

七、总结：React-Redux 的优势

• 明确的数据流（单向）

• 强大的调试工具（Redux DevTools）

• 与中间件（如 redux-thunk）结合支持异步

• 配合 TypeScript 更加严谨和可维护

Redux 并不是每个项目都必须用，但当你的组件之间存在大量状态共享、逻辑复杂时，react-redux 是一个强大且成熟的解决方案。如果你掌握了 Hooks，对 Redux 的集成会更加轻松。