[react]Mobx与Redux的区别

状态容器介绍

1、某一状态只有一个可信数据来源（通常命名为store，指状态容器）
2、操作更新状态方式统一，并且可控（通常以action方式提供更新状态的途径）
3、支持将store与React组件连接，如react-redux，mobx-react；通常使用状态管理库后，我们将React组件从业务上划分为两类：

• 容器组件（Container Components）：负责处理具体业务和状态数据，将业务或状态处理函数传入展示型组件
• 展示型组件（Presentation Components）：负责展示视图，视图交互回调内调用传入的处理函数

一、 Redux

1、 首先，用户发出 Action

store.dispatch(action)

2、然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State
[code ]let nextState = todoApp(previousState, action)[/code]
3、State 一旦有变化，Store 就会调用监听函数

//设置监听函数
store.subscribe(listener)

4、listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View

function listerner() {
  let newState = store.getState();
  component.setState(newState);   
}

二、 Mobx



1、actions 是唯一能够改变 state 的方法。
2、state 是最基础的数据，它不应该包含冗余的和派生的数据。
3、computed values 派生值是通过纯函数从 state 中派生而来的。当派生值依赖的状态发生变化了，Mobx 将会自动更新派生值。如果依赖的状态没有改变，mobx 会做优化处理。
4、reactions 也是派生数据，是从 state 中派生而来的。它的副作用是自动更新 UI。（注：mobx 有一个 reaction 接口，当 state 改变时，就会调用它的回调。UI 是通过 reaction 更新的。）


couter计算示例

redux

mobx



关注点不同

一、 Redux更多的是遵循Flux模式的一种实现，是一个JavaScript库，它的关注点在于：

• 1、 Action：一个JavaScript对象，描述动作相关信息，主要包含type属性和payload属性：type：action 类型
• payload：负载数据

2、 Reducer：定义应用状态如何响应不同动作（action），如何更新状态3、Store：管理action和reducer及其关系的对象，主要提供以下功能：

• 1>. 维护应用状态并支持读取访问状态（getState()）
• 2>. 支持监听action的分发，更新状态（dispatch(action)）
• 3>. 支持订阅store的变更（subscribe(listener)）
• 4>. 支持通过中间件（redux-thunk、redux-saga、redux-promise等）处理异步任务流程

二、 Mobx是一个透明函数响应式编程的状态管理库，它使得状态管理简单可伸缩，它的关注点在于：

• 1、 Action：定义改变状态的动作函数，包括如何变更状态
• 2、Store：集中管理模块状态（State）和动作（action）
• 3、 Derivation（衍生）：从应用状态中派生而出，且没有任何其他影响的数据，我们称为derivation（衍生），衍生在以下情况下存在：用户界面
• 衍生数据, 衍生主要有两种：1、Computed Values（计算值）：计算值总是可以使用纯函数（pure function）从当前可观察状态中获取
• 2、Reactions（反应）：反应指状态变更时需要自动发生的副作用，这种需要实现其读写操作

函数式和面向对象（设计思想的不同）

1、Redux更多的是遵循函数式编程（Functional Programming, FP）思想，而Mobx则更多从面相对象角度考虑问题。

2、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中可以直接使用新值更新状态对象。

Mobx-react 和 React-redux

使用Redux和React应用连接时，需要使用react-redux提供的Provider和connect：
1、Provider:负责将Store注入React应用
2、connect:负责将store state 注入容器组件，并选择特定状态作为容器组件props传递

对于Mobx而言，同样需要两个步骤：
1、Provider:使用mobx-react提供的Provider将所有stores注入应用
2、使用inject将特定store注入某组件，store可以传递状态或action；然后使用observer保证组件能响应store中的可观察对象（observable）变更，即store更新，组件试图响应式更新