大型应用程序的前端管理是最难解决的问题之一。虽然有几种方法可以解决状态管理问题，但Redux和MobX是两个最流行的外部库，用于解决前端应用程序中的状态管理问题。在这篇文章中，我们将研究每个库以及它们是如何匹配的。

本文假设您对web应用程序中的状态管理工作有一个基本的了解。普通JavaScript和Redux框架都适用于普通或不可知的框架。

Redux

Redux是一个流行的状态管理解决方案，它结合了Flux和函数式编程概念。Redux的一些核心原则是：

• Redux只有一个存储——单一来源的真相
• 存储区中的状态是不可变的
• 操作会调用对存储的更改
• Reducers（减速器）更新状态

MobX

MobX是一个状态管理解决方案，可以帮助管理应用程序中的本地状态。

MobX的一些核心原则是：

• MobX可以有多个存储来存储应用程序的状态
• 任何可以从状态派生而不需要任何进一步交互的东西都是派生
• Action是任何可以改变状态的代码
• 当状态发生变化时，所有的派生都会自动和自动地更新

现在让我们比较Redux和MobX的一些关键特性，看看哪些特性更适合您的需求。

人气

在开始学习Redux或MobX之前，让我们看看哪个更受欢迎。

看看下面的谷歌趋势图。截至2019年4月，相比MobX，Redux在谷歌上似乎是一个更受欢迎和搜索的概念。

为了深入了解他们的受欢迎因素，让我们看看2018年JavaScript现状调查。它发布了过去三年里Redux和MobX在开发者中的受欢迎程度的数据。

Redux

Mobx

在过去的几年里，Redux已经获得了大量的人气，并且已经成为状态管理的最佳解决方案。虽然MobX不像Redux那么受欢迎，但它也有自己的优势。

获奖者：Redux

学习曲线

Redux

开发人员对Redux的普遍看法是它不容易学习。2018年JavaScript现状调查分析了Redux最不受欢迎的方面。在这里，开发人员投票认为他们不喜欢Redux的复杂性和它带来的艰苦的学习曲线。

它需要一些时间来理解它的模式和范例。它是通量体系结构和函数式编程概念的结合。如果您是一个函数式程序员，您可能会发现掌握Redux更容易，而如果您来自面向对象编程背景，Redux代码最初看起来很复杂而且很难理解。

学习Redux还意味着您需要了解像Thunk和Saga这样的Redux中间件，这会增加更多的学习内容。

Mobx

众所周知，与Redux相比，MobX更容易掌握。大多数JavaScript开发人员都精通面向对象编程，这使得学习MobX变得简单。另外，MobX中有很多事情是在幕后完成的，为开发人员创造了更好的学习体验。您不必担心状态的规范化或实现类似Thunks的概念。由于已经内置了抽象，因此编写的代码更少。

获奖者：MobX

存储数据-单个存储与多个存储

存储区是我们存储本地数据的地方。它保存整个应用程序的状态。JSON应用程序的状态存储中通常包含一个巨大的对象。

Redux

在Redux，只有一家商店，它是唯一的真理来源。存储中的状态是不可变的，这使得我们更容易知道在哪里可以找到数据/状态。在Redux中，虽然有一个巨大的JSON对象来表示存储，但是您可以始终将代码拆分为多个reducer。这样，就可以用多个reducer在逻辑上分离关注点。对于许多开发人员来说，这是一种更直观的方法，因为他们可以始终引用应用程序状态的单个存储区，并且不存在与当前数据状态相关的重复或混淆的可能性。

Mobx

另一方面，MobX允许多个商店。您可以在逻辑上分离存储区，因此应用程序的所有状态都不在一个存储区中。大多数应用程序设计为至少有两个存储区：一个用于UI状态，一个或多个用于域状态。以这种方式分离存储区的好处是，您也可以在其他应用程序中重用该域。UI存储将特定于当前应用程序。

获奖者：Redux

这个类别的赢家是主观的；这取决于开发者的偏好。我个人喜欢将应用程序的整个状态存储在单个存储中的想法。这有助于我把同一个地方称为真理的唯一来源。有些人可能会说多家商店对他们更有效，更喜欢MobX。

数据结构

Redux

Redux使用普通JavaScript对象作为数据结构来存储状态。使用Redux时，必须手动跟踪更新。在需要维护大量状态的应用程序中，这可能更困难。

Mobx

MobX使用可观测数据。这有助于通过隐式订阅自动跟踪更改。在MobX中，更新是自动跟踪的，因此对开发人员来说更容易。

获奖者：MobX

纯与不纯

Redux

在Redux中，存储中的状态是不可变的，这意味着所有状态都是只读的。Redux中的操作可以调用对状态的更改，reducer可以用新的状态替换以前的状态。这是Redux的核心原则之一。

下面是纯函数的一个简单示例：

function sumOfNumbers(a, b) {
 return a + b;
}

函数将始终返回相同的输出，给定相同的输入。它没有任何副作用或来自外界的影响。

Redux函数使用以下模式编写。reducer是接受一个状态和动作并返回一个新状态的纯函数。

function(state, action) => newState

这让Redux变得纯洁。如果您有兴趣了解更多关于纯函数以及它们在Redux中如何操作的信息，您可以阅读本文以获得更好的理解。这是Redux最好的特性之一。

Mobx

在MobX中，状态是可变的，这意味着您可以简单地用新值更新状态。这让黑帮变得不纯洁。不纯函数很难测试和维护，因为它们并不总是返回可预测的输出。

获奖者：Redux

由于Redux存储是纯的，因此更容易预测，并且很容易恢复状态更新。在MobX的情况下，如果操作不当，状态更新可能会使调试更加困难。

样板代码

Redux

关于Redux最大的抱怨之一是它附带的大量样板代码。当您将React与Redux集成时，会产生更多的样板代码。这是因为Redux本质上是显式的，很多功能都必须显式地编码。

Mobx

MobX更隐式，不需要很多特殊工具。与Redux相比，它的样板代码要少得多。这使得MobX更容易学习和设置。

获奖者：MobX

开发者社区

对于开发人员社区，Redux轻而易举地赢得了胜利。Redux附带了reduxdev工具，供成千上万的开发人员使用。它为调试Redux代码提供了惊人的支持。

MobX还提供开发人员工具，但它们没有Redux提供的相同质量的调试支持。

GitHub统计数据很好地表明了两个库的社区参与度。Redux拥有约48k星，超过672位投稿人。另一方面，MobX拥有大约1.9万星和155名投稿人。

如果我们看看npm的下载量，Redux是遥遥领先的。Redux平均每周下载300万次，MobX平均每周下载25.4万次。这表明Redux被广泛采用。

获奖者：Redux

可扩展性

由于Redux更加固执己见，并且期望reducer函数是纯的，因此它比MobX更容易扩展。Redux的固执己见和纯粹的特性使得应用程序具有可伸缩性。

纯函数更容易测试，因为它们是可预测的和简单的。这就产生了可伸缩的可维护代码。这是选择Redux而不是MobX的核心优势之一。

获奖者：Redux

结论

好吧，判决结果如何？基于开发人员社区、流行度和可伸缩性，Redux的性能优于MobX。但是，如果你想快速跟上速度，用更少的样板代码构建简单的应用程序，MobX可能是你的朋友。

 

 

原文：https://blog.logrocket.com/redux-vs-mobx/

本文：http://jiagoushi.pro/node/1281

讨论：请加入知识星球【首席架构师圈】或者小号【jiagoushi_pro】或者QQ群【1110777】