【Redux】简解及工作流程分析

一、基本介绍

2013 年 Facebook 提出了 Flux 架构的思想，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构

React 与 Redux的区别就相当于 Java 和 JavaScript 的区别，完全是两种不同的东西，只不过名字比较像

Redux的设计思想：

• React 只是 DOM 的一个抽象层，并不是web应用的完整解决方案。代码结构和组件间的通信，他没有涉及
• web应用是一个状态机，视图与状态是一一对应的
• 所以的状态，保存在一个对象里面（唯一数据源）、
• 目的：实现集中式状态管理
• 如果你不知道是否需要 Redux ，那就是不需要它
• 只有遇到 React 实在解决不了的问题，你才需要Redux

---

• 简单说，如果你的UI层非常简单，没有很多互动，Redux就是不必要的，用了反而增加复杂性
• 比如：
• 用户的使用方式非常简单
• 用户之间没有协作
• 不需要与服务器大量交互，也没有使用WebSocket
• 视图层（View）只从单一来源获取数据

---

需要使用Redux的项目：

• 用户的使用方式复杂
• 不同身份的用户有不同的使用方式（比如普通用户和管理员）
• 多个用户之间可以协作
• 与服务器大量交互，或者使用了WebSocket
• View 要从多个来源获取数据

---

从组件层面考虑，什么样子需要Redux：

• 某个组件的状态，需要共享
• 某个状态需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

二、三大原则

• 单一数据源

>整个应用的state被存储在一棵对象结构树中
>（整个state不是组件中的state，请不要混淆）
>并且这个对象结构只存在唯一一个store中

• State 是只读的

> 唯一改变 state 的方法就是触发 dispatch+action
> action是一个用于描述已发生时间的**普通对象**
> （action普通对象必须要有`type`属性，值是什么无所谓，其余属性也无所谓）

• 数据的改变必须通过纯函数完成

> 为了描述action如何改变state tree，我们需要编写reducer，
> reducer 必须是纯函数，它接收先前的state和action，并返回新的state（不会合并的，自行注意这个坑）
> 一个函数的返回结果只接收其形参的影响，则其就是纯函数

三、工作流程图

• 完整版：

先来个简单版本的：

• Store 相当于老板
• Reducers 相当于厨师
• Action Creators相当于服务员
• React Component 相当于顾客
• 打个比方：

1. 顾客（React Component）想吃点东西，于是就把吃啥告诉了服务员（Action Creators）
2. 服务员（Action Creators）就用菜单（dispatch）记录（action）下来，点了什么菜（type），和数量（data）。
3. 然后把菜单（ dispatch(action) ）交给了老板（Store），老板就根据菜单上的内容，告诉给厨师（Reducers）让他炒什么菜
4. 厨师（Reducers）收到老板的指示后，迅速的把菜做好。并端给（return newState）老板（Store）。
5. 菜放到老板这后，老板（Store）就通知顾客（React Component）来取餐（getState）

• （previousState, action）：顾客如果开始点了一个蛋炒饭，后面又加了一个紫菜汤。
• 此时表示蛋炒饭之前的数据（previousState），紫菜汤表示现在的数据（ action）

---

再来看具体实现的：

• Action：动作的对象，有两个属性

type：标识属性，值为字符串，唯一，必选参数
data：数据属性，值类型任意，可选参数

• Reducer：用于初始化状态和加工状态

加工时根据旧的state值和传过来的action
生成新的state的值，是一个纯函数

• Store：将state、action、reducer联系在一起的对象，相当于指挥者

1. 创建store对象：createStore(reducer);
2. 获取state的值：getState()
3. 派发动作：dispatch(action)
4. 注册监听：subscribe() 当产生新的 state 时，自动调用

---

• 简化版：
  

Redux 的流程

1. store 通过 reducer 创建了初始状态
2. view 通过 store.getState() 获取到了 store 中保存的 state，挂载在了自己的状态上
3. 用户产生了操作，调用了actions 的方法
4. actions 的方法被调用，创建了带有标识性信息的action
5. actions 将 action 通过调用 store.dispatch 方法发送到了reducer
6. reducer 接收 到 action 并根据标识信息判断之后返回了新的 state
7. store 的 state 被 reducer 更新为新的 state 的时候，store.subscribe 方法里的回调函数会执行，此时就可以通知 view 去重新获取 state