Mobx与Redux的区别
一、状态容器介绍
1.redux
https://blog-zwj.oss-cn-beijing.aliyuncs.com/20200526/reudx.png
首先，用户发出 Action
store.dispatch(action);然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State
let nextState = todoApp(previousState, action);State 一旦有变化，Store 就会调用监听函数
//设置监听函数
store.subscribe(listener);listener 可以通过 store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View
function listerner() {
let newState = store.getState();
component.setState(newState);
}
2. Mobx
https://blog-zwj.oss-cn-beijing.aliyuncs.com/20200526/mobx.png
actions 是唯一能够改变 state 的方法。
state 是最基础的数据，它不应该包含冗余的和派生的数据。
computed values 派生值是通过纯函数从 state 中派生而来的。当派生值依赖的状态发生变化了，Mobx 将会自动更新派生值。如果依赖的状态没有改变，mobx 会做优化处理。
reactions 也是派生数据，是从 state 中派生而来的。它的副作用是自动更新 UI。（注：mobx 有一个 reaction 接口，当 state 改变时，就会调用它的回调。UI 是通过 reaction 更新的。）
二、couter 计算示例
reudx
https://blog-zwj.oss-cn-beijing.aliyuncs.com/20200526/counter-redux.png
mobx
https://blog-zwj.oss-cn-beijing.aliyuncs.com/20200526/counter-mobx.png
三、关注点不同
Redux
更多的是遵循 Flux 模式的一种实现，是一个 JavaScript 库，它的关注点在于：
- Action：一个 JavaScript 对象，描述动作相关信息，主要包含 type 属性和 payload 属性：
- type：action 类型
- payload：负载数据
- Reducer：定义应用状态如何响应不同动作（action），如何更新状态
- Store：管理 action 和 reducer 及其关系的对象，主要提供以下功能：
- 维护应用状态并支持读取访问状态（getState()）
- 支持监听 action 的分发，更新状态（dispatch(action)）
- 支持订阅 store 的变更（subscribe(listener)）
- 支持通过中间件（redux-thunk、redux-saga、redux-promise 等）处理异步任务流程
mobx
Mobx 是一个透明函数响应式编程的状态管理库，它使得状态管理简单可伸缩，它的关注点在于：
- Action：定义改变状态的动作函数，包括如何变更状态
- Store：集中管理模块状态（State）和动作（action）
- Derivation（衍生）：从应用状态中派生而出，且没有任何其他影响的数据，我们称为 derivation（衍生），衍生在以下情况下存在：
- 用户界面
- 衍生数据, 衍生主要有两种：
- Computed Values（计算值）：计算值总是可以使用纯函数（pure function）从当前可观察状态中获取
- Reactions（反应）：反应指状态变更时需要自动发生的副作用，这种需要实现其读写操作
四、 函数式和面向对象（设计思想的不同）
- Redux 更多的是遵循函数式编程（Functional Programming, FP）思想，而 Mobx 则更多从面相对象角度考虑问题。
- Redux 提倡编写函数式代码，如 reducer 就是一个纯函数（pure function）纯函数，接受输入，然后输出结果，除此之外不会有任何影响，也包括不会影响接收的参数；对于相同的输入总是输出相同的结果。 Mobx 设计更多偏向于面向对象编程（OOP）和响应式编程（Reactive Programming），通常将状态包装成可观察对象，于是我们就可以使用可观察对象的所有能力，一旦状态对象变更，就能自动获得更新。
五、 单一 Store 和多 Store（对 store 管理的不同）
Store 是应用管理数据的地方，在 Redux 应用中，我们总是将所有共享的应用数据集中在一个大的 store 中，而 Mbox 则通常按模块将应用状态划分，在多个独立的 store 中管理
六、 JavaScript 对象和可观察对象
- Redux 默认以 JavaScript 原生对象形式存储数据，而 Mbox 使用可观察对象
- Redux 需要手动追踪所有状态对象的变更 Mobx 中可以监听可观察对象，当其变更时将自动触发监听
七、 不可变（Immutable）和可变（Mutable）(数据可变性的不同)
- Redux 状态对象通常是不可变的（Immutable）：我们不能直接操作状态对象，而总是在原来状态对象基础上返回一个新的状态对象，这样就能很方便的返回应用上一状态；而 Mobx 中可以直接使用新值更新状态对象。