Mobx 及 相关插件
主要从如下几方面介绍:
- Redux使用
- MoBx使用
- 对比redux、MoBx区别
- MST介绍
redux篇
几个重要概念:
Tood List
- Action: Js对象. 主要包含type、payload属性
- Store: Redux 应用只有一个单一的 store
- Reducer: 描述action如何更改state tree
Mobx篇
任何源自应用状态的东西都应该自动地获得
几个重要概念 Demo
- action: 定义改变状态的动作函数
- store: 集中管理模块状态（State）
- Computed Values: 计算值总是可以使用纯函数（pure function）从当前可观察状态中获取
- Reactions: 反应指状态变更时需要自动发生的副作用
vue篇
vue官网：几乎相同的反应系统。在有限程度上，React + Mobx 也可以被认为是更繁琐的 Vue，所以如果你习惯组合使用它们，那么选择 Vue 会更合理
区别篇
-
函数式和响应式编程
Redux需要手动追踪所有状态对象的变更(setState、reducer)；Mobx设计更多偏向于响应式编程（Reactive Programming），通常将状态包装成可观察对象，于是我们就可以使用可观察对象的所有能力，一旦状态对象变更，就能自动获得更新。
-
不可变（Immutable）和可变（Mutable）
// Redux状态对象通常是不可变的（Immutable）, 而Mobx中可以直接使用新值更新状态对象
switch (action.type) {
case REQUEST_POST:
return Object.assign({}, state, {
post: action.payload.post
});
default:
retur nstate;
}
-
单一store与多store
store是应用管理数据的地方，在Redux应用中，我们总是将所有共享的应用数据集中在一个大的store中，而Mobx则通常按模块将应用状态划分，在多个独立的store中管理
为何引入Mobx
- 学习成本小，较灵活 demo 而Redux确较繁琐，流程较多，需要配置，创建store，编写reducer，action
- 模版代码少：相对于Redux的各种模版代码，如，actionCreater，reducer，saga／thunk等，Mobx则不需要编写这类模板代码
Mobx缺点
- 过于灵活，对于多人参与的项目，容易导致代码风格不统一
MST（mobx-state-tree）
- 声明默认值
- 定义类型
