状态管理库之redux和mobx的共同点和区别有什么

谈到react我们一定会想到redux，mobx这些状态管理库，那么 redux和mobx之间有哪些共同点，又有哪些区别呢？且听我一一道来：

共同点：

• 为了解决状态管理混乱，无法有效的同步的问题
• 统一尾货管理应用状态
• 某一状态只有一个可信的数据源，通常是以action的方式提供更新状态的途径
• 支持将store与react链接，如react-redux,mobx-react

区别：

redux:redux更多的是解决flux模式的一种实现，是JavaScript库，他关注的主要有以下几个方面的东西：

• Action：一个JavaScript对象，描述动作相关信息，主要包括type属性和payload属性；

1. type:action类型
2. payload:负载数据

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

1. 维护应用状态并支持维护状态（getState()）
2. 支持监听action的分发，更新状态（dispatch(action)）
3. 支持订阅store的变更（subscribe(listener)）

• 异步流：由于redux所有对于store状态的变更，都应用action触发，异步任务（通常都是业务或获取数据任务）也不例外，而为了不将业务或数据相关的任务混入到react组件中，就需要使用其他的框架配合管理异步任务，如redux-thunk,redux-saga等

mobx:mobx是一个透明的函数响应式编程的状态管理库，它使得状态管理简单可伸缩。

• Action：定义改变状态的动作函数。包括如何变更状态
• store：集中管理模块状态（state）和动作（Action）
• derivation(衍生):从应用状态中派生而出，且没有任何其他影响的数据

对比总结：

redux将数据保存在单一的store中，mobx将数据保存在分散的多store中

redux使用plain Object保存数据，需要手动处理变化后的操作，mobx使用observable保存数据，数据变化后自动处理响应操作

redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数，mobx中的状态是可变的，可以直接对其进行修改

mobx相对来说比较简单，在其中有很多的抽象，mobx更多的是使用的面向对象的编程思维，redux会比较复杂，因为其中使用的是函数式的编程思维支撑起来不是那么容易，同时需要借助一系列的中间件来处理异步和副作用

mobx中有更多的抽象和封装，调试会比较困难，同时结果也难以预测，而redux提供进行时间回溯的开发工具，同时纯春函数以及更少的抽象，让调试变得更加容易