mobx分享

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）

• 声明默认值
• 定义类型