前端数据流管理方案之一——Redux

[Rashomon511]

Redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理.核心概念就是初始状态通过reduce接收只是一个接收 state 和 action，并返回新的 state，所得的就是当前状态。

Redux三大原则

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。并不做其他操作（修改传入的参数；执行有副作用的操作；调用非纯函数）。

redux各个组成部分

Action

Action 是把数据从应用传到 store 的有效载荷,它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

注意：“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。Action 创建函数 就是生成 action 的方法

Reducer

actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。而Reducer就是一个纯函数，接收旧的 state 和 action，返回新的 state。
现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。

Store

Redux 应用只有一个单一的 store，Store是把action和reducer联系到一起到对象Store 有以下职责：

1.维持应用的 state；
2.提供 getState() 方法获取 state；
3.提供 dispatch(action) 方法更新 state；
4.通过 subscribe(listener) 注册监听器;
5.通过 subscribe(listener) 返回的函数注销监听器

Redux流程

react+redux流程

Redux优缺点

优点
1.纯函数的开发模式，无副作用。
2.单向数据流流动自然清晰，任何的dispatch都会通知到reducer来处理，增强更新粒度可控性。
3.利用中间件的模式来解决异步带来的副作用问题。
4.可时间回溯。为了解决阻碍回溯的“对象引用”机制，将 immutable应用到了前端。这下所有状态都不会被修改，基于此的redux-dev-tools提高了开发体验
缺点：

1.代码书写啰嗦，造成代码冗余

reduxdemo

扩展

Redux处理异步的中间件

Redux针对异步数据流的情况，也设计出中间件这个概念来隔离异步所带来的副作用。它的主要目的就是控制异步dispatch，分离副作用。

接下来说说最具代表性的两个异步中间件：redux-thunk 和 redux-saga。

redux-thunk

redux-thunk 的任务执行方式是从 UI 组件直接触发任务,redux-thunk 的主要思想是扩展 action，使得 action 从一个对象变成一个函数。

redux-saga

sages 采用 Generator 函数来 yield Effects（包含指令的文本对象）。Generator 函数的作用是可以暂停执行，再次执行的时候从上次暂停的地方继续执行.在 redux-saga 中，UI 组件自身从来不会触发任务，它们总是会 dispatch 一个 action 来通知在 UI 中哪些地方发生了改变，而不需要对 action 进行修改

redux-thunk 的缺点：
（1）action 虽然扩展了，但因此变得复杂，后期可维护性降低；
（2）thunks 内部测试逻辑比较困难，需要mock所有的触发函数；
（3）协调并发任务比较困难，当自己的 action 调用了别人的 action，别人的 action 发生改动，则需要自己主动修改；
（4）业务逻辑会散布在不同的地方：启动的模块，组件以及thunks内部。
redux-saga 的优点：
（1）声明式 Effects：所有的操作以JavaScript对象的方式被 yield，并被 middleware 执行。使得在 saga 内部测试变得更加容易，可以通过简单地遍历 Generator 并在 yield 后的成功值上面做一个 deepEqual 测试。
（2）高级的异步控制流以及并发管理：可以使用简单的同步方式描述异步流，并通过 fork 实现并发任务。
（3）架构上的优势：将所有的异步流程控制都移入到了 sagas，UI 组件不用执行业务逻辑，只需 dispatch action 就行，增强组件复用性。

redux-saga 实践demo