一一九、Mobx Redux Vuex

Mobx

Redux

1. redux是的诞生是为了给 React 应用提供「可预测化的状态管理」机制。
2. Redux会将整个应用状态(其实也就是数据)存储到到一个地方，称为store这个store里面保存一棵状态树(state tree)
3. 组件改变state的唯一方法是通过调用store的dispatch方法，触发一个action，这个action被对应的reducer处理，于是state完成更新
4. 组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件
5. 其它组件可以通过订阅store中的状态(state)来刷新自己的视图

相同点

• 统一维护管理应用状态
• 某一状态只有一个可信数据来源-store 状态容器
• 操作更新状态方式统一，并且可控(通常以action方式提供更新状态的途径)
• 将react组件从业务上分为容器组件和展示型组件(视图)

不同点

1. 函数式和面向对象
   • Redux 更多的是遵循函数式编程思想，而Mobx更多的是从面向对象角度考虑问题
   • Redux提倡函数式代码，如reducer就是一个纯函数.纯函数接受输入，然后输出结果，除此之外不会有任何影响，也包括不会影响接受的参数
   • Mobx更多偏向于面向对象编程和响应式编程，通常将状态包装成可观察对象(observable)，于是我们就可以使用可观察对象的所有能力，一旦所有状态对象变更，就能自动获得更新
2. 单一和多个store
   • Store是应用管理数据的地方，在Redux中，我们总是将所有共享的数据集中在一个大的store中，而Mobx则通常按模块将应用状态划分，在多个独立的store中管理
3. Javascript对象和可观查对象
   • Redux以javascript原生对象形式存储数据，而Mobx使用可观察对象
   • Redux需要手动追踪所有状态对象的变更， Mobx中可以监视可观察对象，当其变更时自动触发监听
4. 不可变(immutable)和可变(mutable)
   • Redux状态通常是不可变的，我们不能直接操作状态对象，而是在原来状态基础上返回一个新的状态对象，这样就能方便应用上一状态，而Mobx中直接使用新值更新状态对象
5. react-redux
   • 使用react和redux连接时，需要使用react-redux提供的provider和connect
   • Provider 负责将store注入React应用中
   • Connect 负责将store state注入容器组件，并选择特定的状态为容器组件props传递
6. mobx-react
   • Provider 利用mobx-react提供的provider将所有的组件注入
   • 使用inject将特定的store注入组件，store可以传递状态或action， 然后使用observer保证组件能响应store中的客观查对象observable变更，即store更新，组件视图响应式更新

Vuex

• 吸取了一些 Redux 的特点，比如单状态树(用一个对象就包含了所有的应用层级状态，至此它便作为唯一数据源的存在，这也意味着没一个应用仅仅包含一个store实例，单一的状态树能够让我们直接的定位任一特定状态片段)和便于测试和热重载的 API
• 和redux使用不可变数据来表示state不同，vuex中没有render来生成全新的state来替换旧的state。Vuex中的state是可以修改的。这么做的原因和vue运行机制有关，vue是基于ES5的getter/setter来实现视图数据的双向绑定，因此，vue中的视图变更可以通过setter通知到视图中对应的指令来实现视图更新。
• Mutation(commit) 同步修改state,Action(dispash) 异步提交mutation，getter>类似computer