大纲:
1. 数据流的分类
2. Redux模型的好处和缺点
3. Redux模型中, Store存放哪些数据
数据流分类
前端状态管理大概分为两个流派
- immutable: 以redux 为代表的 reducer是一个纯函数。
- observerable: 以mobx,rxjs为代表的响应式流派
Redux模型
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。