redux 的核心概念与原则
要理解 redux，首先要理解 redux 中的几个核心概念：Store、Action、Reducer 和 Component
- Store：全局状态的存储中心，整个状态树都存储在 redux 中
- Action：用来描述一次具体的操作，是唯一能够改变 Store 的方式
- Reducer：一个纯函数，根据当前的状态和接收到的 Action，能够计算出最新的状态
- Component：用户的操作界面，在 react 中通常就是 react 组件
用一张图来说明 Store、Action、Reducer、 Component 四个核心概念
- 首先从 Component 开始，当用户在页面进行一次操作时，会触发 Action
- Action 会将用户操作分配给 Store
- Store 将当前状态和收到的 Action 交给 Reducer 计算出新的状态
- Store 状态更新后，会通知 Component 重新渲染，更新页面
redux 的核心是提供一个状态可预测的状态管理工具，除了上面讲到的四个核心外，还有三个基本原则用来保证状态管理的可预测性
- 单一数据源：所有状态统一保存在 Store 中，保证状态的统一维护、统一存储以及状态在不同组件间的共享
- 状态是只读的：状态的只读性质意味着不能直接修改状态，唯一的修改状态的方式只能通过 Action。通过 Action 保证了状态修改可以通过 Action 追踪，可以撤销或者重做，即使在异步的情况下也可以保证状态的一致性
- 通过纯函数修改状态 ：前面提到负责计算最新状态的 Reducer 是一个纯函数，纯函数的特点是没有副作用，给定相同的输入能够返回相同的输出，通过纯函数的确定性保证了状态的可预测性。并且通过纯函数的拆分，可以将一个大的 Reducer 拆分为多个小的 Reducer，保证每个 Reducer 的简单和独立
redux 技术栈的架构和关系
在 react 项目中使用 redux 通常还会使用到 @reduxjs/toolkit、react-redux 这一类的工具库，还有 redux-thunk、redux-persist 等按需使用的中间件，下面我们从 redux 和 redux 相关的工具库、中间件的架构和关系来理解 redux
首先看 redux 的核心方法，redux 本质上是通过发布-订阅模式实现状态管理的，所以核心方法包括
- createStore：用于创建 Store 存储全局状态，作为发布-订阅模式中的通道
- dispatch：redux 中的发布者，通过 dispatch 方法发布 actions（actions 描述状态如何改变）
- subscribe：订阅者通过 subscribe 方法注册回调用函数，当状态发生变化时，注册的回调函数会被执行
- getState：获取当前状态的快照
redux 相关的工具库主要有两个
- redux-toolkit：redux 官方维护的工具库，目的是简化 redux 的操作配置，在 redux 上做了一层封装
- react-redux：也是 redux 官方维护的，用于 react 组件和 redux Store 交互
redux-toolkit 使用过程中的核心方法包括
- configureStore：设置和配置 Store，自动集成中间件和 DevTools
- createSlice：用于创建切片（slice），一个 slice 相当于一个小型的状态操作对象，包括初始化的 State 定义和操作状态的 Action 和 Reducer
react-redux 的核心 api 主要有三类
- Provider 组件：包裹在应用最外层，保证所有 react 组件都能访问到 Store
- hooks：用于在 react 组件中使用 Store 和 Action
- connect：用于选择性的将 Store 和 Action 传递到 react 组件中（更推荐使用 hooks 的方式操作 Store）
除了两个官方维护的工具库外，redux 中还有一个很重要的中间件机制，通过中间件能够插入自定义的 dispatch 逻辑，扩展 redux 的功能，常用的 redux 中间件包括
- redux-thunk：允许 Action 返回一个函数而不是对象，可以延迟 Action 的派发或者只在特定条件下才派发 Action
- redux-promise：可以派发一个包含 Promise 的 Action
- redux-presist：自动保存 Store 到本地存储中（localStorage）
中间件本质一个函数，接收 Store 的 dispatch 和 getState 方法作为参数，并返回一个函数接受下一个中间件的 dispatch 方法作为入参。redux 通过 applyMiddleware 方法注册中间件
总结
最后总结一下 redux 的核心概念、核心原则和相关技术栈
- 核心概念：通过 Store 统一管理状态，通过 Action 描述状态的更新，通过 Reducer 计算出最新的状态
- 核心原则：单向数据流、只能通过 Action 修改状态、使用纯函数保证没有副作用三个原则，保证整个状态是可预测的
- 相关技术栈：
- redux 是整个生态的核心，提供核心的状态管理能力
- reach-redux 是 react 组件和 redux 连接的桥梁，提供了在 react 组件中访问和操作 redux 状态的能力
- redux-toolkit 简化了 redux 的配置和使用，减少了样板代码并且提升了开发体验
- redux 通过中间件机制和一系列中间件生态扩展了基础功能
redux 原理分析相关文章导航
- 探索 redux：状态管理的艺术
- redux 架构探秘：从 redux 到 react-redux 和 redux-toolkit（写作中）
- redux 中间件解码：扩展 redux 功能的秘密（写作中）