Redux 前端状态管理

大纲:

1. 数据流的分类

2. Redux模型的好处和缺点

3. Redux模型中, Store存放哪些数据

数据流分类

前端状态管理大概分为两个流派

- immutable: 以redux 为代表的 reducer是一个纯函数。

- observerable: 以mobx,rxjs为代表的响应式流派

Redux模型

图片来自 Dva

React一直宣称自己是一个UI框架,他不处理状态相关的事情。但是在我们的实际开发中，需要大量处理state。facebook提出了一个flux的思路:核心就是如果你要修改state数据,不能直接修改它(只读)。而是要大张旗鼓的喊出来(发出一个action)，告诉别人你要修改数据了。

redux 是flux的实现版本，他的核心三大原则是:

- 单一数据源

- State是只读的

- reducer(更改数据)必须是纯函数

Redux将数据都存在Store中保证了状态的可预测性和稳定性,

Store是顶层根节点平级的存在,是所谓的上帝视角。这样数据都是从上而下的渲染

但是Redux也有一些问题

- 典型的就是样板代码太多，一个简单的功能需要找N多个文件

- 不是分形的结构:比如我们在开发过程中可以复用一段redux 的逻辑，也可以复用一个组件。但是在Redux的开发过程中store和View 通过connect连接。我们无法将state和组件放在一起来复用。

Store存放哪些数据

现在前端开发都以数据处理为中心进行展开的。使用Redux进行开发时候有个问题要面对:Store数据放在哪里?

一般有两种思路

1. 所有的数据放在Store中，作为前端的数据库,这样的好处是没有必要考虑太多，一股脑的将所有的数据放在全局的store中。但是有几个问题:

 - 所有的状态在store中,store中的数据量多大。

- 业务逻辑无法复用，非常多的重复代码

2. 公共数据放在Store,组件中保留自己的状态

这里我们将数据分为两类:

- Domain State，可以分为映射的后端的表结构

- Application state或者认为是UI state。也可以分为Global state 和local state

Global state可以这样区分:兄弟节点的state 或者通过onChange 等回调进行更改的State。都可以认为是 Global state。

State 区分