Redux 和 Mobx的选择问题：让你不再困惑！

 我在去年大量的使用了 Redux，但我最近都在使用 Mobx 来做状态（state）管理。似乎现在社区里关于该选什么来替代 Redux 很自然地成为了一件困惑的事。开发者不确定该选择哪种解决方案。这个问题并不只是出现在 Redux 与 Mobx 上。无论何时，只要存在选择，人们就会好奇最好的解决问题的方式是什么。我现在写的这些是为了解决 Redux 和 Mobx 这两个状态管理库之间的困惑。

大部分的文章都用 React 来介绍 Mobx 和 Redux 的用法。但是在大部分情况下你都可以将 React 替换成 Angular 、 Vue 或其他。

在 2016 年年初的时候我用 React + Redux 写了一个相当大的应用。在我发现可以使用 Mobx 替代 Redux 时，我花时间将应用从 Redux 重构成了 Mobx 。现在我可以非常自在的使用它俩并且解释它俩的用法。

这篇文章将要讲什么呢？如果你不打算看这么长的文章（TLDR：too long, didn't read（查看此链接请自备梯子）），你可以看下目录。但我想给你更多细节：第一，我想简单地回顾状态管理库为我们解决了什么问题。毕竟我们写 React 时只用 setState() 或写其他 SPA 框架时用 setState() 类似的方法一样也可以做的不错。第二，我会大致的说下它们之间的相同之处和不同之处。第三，我会给 React 生态初学者指明怎样学习 React 的状态管理。友情提醒：在你深入 Mobx 和 Redux 之前，请先使用 setState() 。最后，如果你已经有一个使用了 Mobx 或 Redux 的应用，我将会就如何从其中一个状态管理库重构到另一个给你更多我的理解。

目录

我们要解决的是什么问题？

Mobx 和 Redux 的不同？

React 状态管理的学习曲线

尝试另一个状态管理方案？

最后思考

我们要解决的是什么问题？

所有人都想在应用中使用状态管理。但它为我们解决了什么问题？很多人开始一个小应用时就已经引入一个状态管理库。所有人都在谈论 Mobx 和 Redux ，不是吗？但大部分应用在一开始的时候并不需要大型的状态管理。这甚至是危险的，因为这部分人将无法体验 Mobx 和 Redux 这些库所要解决的问题。

如今的现状是要用组件（components）来构建一个前端应用。组件有自己的内部状态。举个栗子，在 React 中上述的本地状态是用this.state和setState()来处理。但本地状态的状态管理在膨胀的应用中很快会变得混乱，因为：

一个组件需要和另一个组件共享状态

一个组件需要改变另一个组件的状态

到一定程度时，推算应用的状态将会变得越来越困难。它就会变成一个有很多状态对象并且在组件层级上互相修改状态的混乱应用。在大部分情况下，状态对象和状态的修改并没有必要绑定在一些组件上。当你把状态提升时，它们可以通过组件树得到。

所以，解决方案是引入状态管理库，比如：Mobx 或 Redux。它提供工具在某个地方保存状态、修改状态和更新状态。你可以从一个地方获得状态，一个地方修改它，一个地方得到它的更新。它遵循单一数据源的原则。这让我们更容易推断状态的值和状态的修改，因为它们与我们的组件是解耦的。

像 Redux 和 Mobx 这类状态管理库一般都有附带的工具，例如在 React 中使用的有 react-redux 和 mobx-react，它们使你的组件能够获得状态。一般情况下，这些组件被叫做容器组件（container components），或者说的更加确切的话，就是连接组件( connected components )。只要你将组件升级成连接组件，你就可以在组件层级的任何地方得到和更改状态。

Mobx 和 Redux 的不同？

在我们深入了解 Redux 和 Mobx 的不同之前，我想先谈谈它们之间的相同之处。

这两个库都是用来管理 JavaScript 应用的状态。它们并不一定要跟 React 绑定在一起，它们也可以在 AngularJs 和 VueJs 这些其他库里使用。但它们与 React 的理念结合得非常好。

如果你选择了其中一个状态管理方案，你不会感到被它锁定了。因为你可以在任何时候切换到另一个解决方案。你可以从 Mobx 换成 Redux 或从 Redux 换成 Mobx。我下面会展示如何能够做到。

Dan Abramov 的 Redux 是从 flux 架构派生出来的。和 flux 不同的是，Redux 用单一 store 而不是多个 store 来保存 state，另外，它用纯函数替代 dispatcher 来修改 state，如果你对 flux 不熟并且没接触过状态管理，不要被这段内容所烦恼。

Redux 被 FP（函数式编程）原则所影响。FP 可以在 JavaScript 中使用，但很多人有面向对象语言的背景，比如 Java。他们在刚开始的时候很难适应函数式编程的原则。这就是为什么对于初学者来说 Mobx 可能更加简单。

既然 Redux 拥抱 FP，那它使用的就是纯函数。一个接受输入并返回输出并且没有其他依赖的纯函数。一个纯函数在相同的输入下输出总是相同而且没有任何副作用。

(state, action) => newState

你的 Redux state 是不可变的，你应该总是返回一个新的 state 而不是修改原 state。你不应该执行 state 的修改或依据对象引用的更改。

// don't do this in Redux, because it mutates the array
function addAuthor(state, action) {
 return state.authors.push(action.author);
}
// stay immutable and always return a new object
function addAuthor(state, action) {
 return [ ...state.authors, action.author ];
}

最后，在 Redux 的习惯用法里，state 的格式是像数据库一样标准化的。实体之间只靠 id 互相引用，这是最佳实践。虽然不是每个人都这样做，你也可以使用 normalizr 来使 state 标准化。标准化的 state 让你能够保持一个扁平的 state 和保持实体为单一数据源。

{
 post: {
 id: 'a',
 authorId: 'b',
 ...
 },
 author: {
 id: 'b',
 postIds: ['a', ...],
 ...
 }
}

Michel Weststrate 的 Mobx 则是受到面向对象编程和响应式编程的影响。它将 state 包装成可观察的对象，因此你的 state 就有了 Observable 的所有能力。state 数据可以只有普通的 setter 和 getter，但 observable 让我们能在数据改变的时候得到更新的值。

Mobx 的 state 是可变的，所以你直接的修改 state ：

function addAuthor(author) {
 this.authors.push(author);
}

除此之外，state 实体保持嵌套的数据结构来互相关联。你不必标准化 state，而是让它们保持嵌套。

{
 post: {
 id: 'a',
 ...
 author: {
 id: 'b',
 ...
 }
 }
}

单 store 与多 stores

在 Redux 中，你将所有的 state 都放在一个全局的 store。这个 store 对象就是你的单一数据源。另一方面，多个 reducers 允许你修改不可变的 state。

Mobx 则相反，它使用多 stores。和 Redux 的 reducers 类似，你可以在技术层面或领域进行分治。也许你想在不同的 stores 里保存你的领域实体，但仍然保持对视图中 state 的控制。毕竟你配置 state 是为了让应用看起来更合理。

从技术层面来说，你一样可以在 Redux 中使用多个 stores。没有人强迫你只能只用一个 store。 但那不是 Redux 建议的用法。因为那违反了最佳实践。在 Redux 中，你的单 store 通过 reducers 的全局事件来响应更新。

如何使用？

你需要跟随下面的代码学习使用 Redux，首先在全局 state 上新增一个 user 数组。你可以看到我通过对象扩展运算符来返回一个新对象。你同样可以在 ES6（原文为 ES5，实际是应该是 ES6）中使用 Object.assign() 来操作不可变对象。

const initialState = {
 users: [
 {
 name: 'Dan'
 },
 {
 name: 'Michel'
 }
 ]
};
// reducer
function users(state = initialState, action) {
 switch (action.type) {
 case 'USER_ADD':
 return { ...state, users: [ ...state.users, action.user ] };
 default:
 return state;
 }
}
// action
{ type: 'USER_ADD', user: user };

你必须使用 dispatch({ type: 'USER_ADD', user: user });来为全局 state 添加一个新 user 。

在 Mobx 中，一个 store 只管理一个子 state（就像 Redux 中管理子 state 的 reducer），但你可以直接修改 state 。

@observable 让我们可以观察到 state 的变化。

class UserStore {
 @observable users = [
 {
 name: 'Dan'
 },
 {
 name: 'Michel'
 }
 ];
}

现在我们就可以调用 store 实例的方法：userStore.users.push(user);。这是一种最佳实践，虽然使用 actions 去操作 state 的修改更加清楚明确。

class UserStore {
 @observable users = [
 {
 name: 'Dan'
 },
 {
 name: 'Michel'
 }
 ];
 @action addUser = (user) => {
 this.users.push(user);
 }
}

在 Mobx 中你可以加上 useStrict() 来强制使用 action。现在你可以调用 store 实例上的方法：userStore.addUser(user); 来修改你的 state 。

你已经看到如何在 Redux 和 Mobx 中更新 state 。它们是不同的，Redux 中 state 是只读的，你只能使用明确的 actions 来修改 state ，Mobx 则相反，state 是可读和写的，你可以不使用 actions 直接修改 state，但你可以 useStrict() 来使用明确的 actions 。

React 状态管理的学习曲线

React 应用广泛使用 Redux 和 Mobx 。但它们是独立的状态管理库，可以运用在除 React 的任何地方。它们的互操作库让我们能简单的连接React 组件。Redux + React 的 react-redux 和 MobX + React 的mobx-react 。稍后我会说明它俩如何在 React 组件树中使用。

在最近的讨论中，人们在争论 Redux 的学习曲线。这通常发生在下面的情境中：想使用 Redux 做状态管理的 React 初学者。大部分人认为 React 和 Redux 本身都有颇高的学习曲线，两者结合的话会失控。一个替代的选择就是 Mobx ，因为它更适合初学者。

然而，我会建议 React 的初学者一个学习状态管理的新方法。先学习React 组件内部的状态管理功能。在 React 应用，你首先会学到生命周期方法，而且你会用 setState() 和 this.state 解决本地的状态管理。我非常推荐上面的学习路径。不然你会在 React 的生态中迷失。在这条学习路径的最后，你会认识到组件内部管理状态难度越来越大。毕竟那是 The Road to learn React 书里如何教授 React 状态管理的方法。

现在我们重点讨论 Redux 和 Mobx 为我们解决了什么问题？它俩都提供了在组件外部管理应用状态的方法。state 与组件相互解耦，组件可以读取 state ，修改 state ，有新 state 时更新。这个 state 是单一数据源。

现在你需要选择其中一个状态管理库。这肯定是要第一时间解决的问题。此外，在开发过相当大的应用之后，你应该能很自如使用 React 。

初学者用 Redux 还是 Mobx "background-color: #99ccff">   注：Mobx 可以很好的在 React 内部组件状态管理中代替 setState，我还是建议继续使用 setState() 管理内部状态。但链接文章很清楚的说明了在 React 中用 Mobx 完成内部状态管理是很容易的。                                                                      

// component
<button onClick={() => store.users.push(user)} />

// component
<button onClick={() => store.addUser(user)} />
// store
@action addUser = (user) => {
 this.users.push(user);
}

// root file
import { useStrict } from 'mobx';
useStrict(true);

// reducer
(state, action) => newState

import { observer, inject } from 'mobx-react';
...
const UserProfileContainer = inject(
 'userStore'
)(observer(({
 id,
 userStore,
}) => {
 return (
 <UserProfile
 user={userStore.getUser(id)}
 onUpdateUser={userStore.updateUser}
 />
 );
}));

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
...
function mapStateToProps(state, props) {
 const { id } = props;
 const user = state.users[id];
 return {
 user,
 };
}
function mapDispatchToProps(dispatch) {
 return {
 onUpdateUser: bindActionCreators(actions.updateUser, dispatch),
 };
}
const UserProfileContainer = connect(mapStateToProps, mapDispatchToProps)(UserProfile);