Redux 与 MobX：哪个最适合您的项目？

对于许多 JavaScript 开发人员来说，对 Redux 最大的抱怨是实现功能所需的样板代码量。更好的替代方案是 MobX，它提供类似的功能，但需要编写的代码更少。 Play Next Unmute Current Time Duration 2:00 Fullscreen Backward Skip 10s Play Video Forward Skip 10s 对于 MobX 新手，请快速浏览一下MobX 创建者撰写的这篇介绍。您还可以通过本教程来获得一些实践经验。 本文的目标是帮助 JavaScript 开发人员确定这两种状态管理解决方案中哪一种最适合他们的项目。我已将此CRUD Redux 项目迁移到MobX，以用作本文中的示例。我将首先讨论使用 MobX 的优缺点，然后我将演示两个版本的实际代码示例以显示差异。 本文提到的项目的代码可以在GitHub上找到： Redux CRUD 示例 MobX CRUD 示例 如果您喜欢这篇文章，您可能还想注册 SitePoint Premium 并观看我们有关使用 React 和 Redux 处理表单的课程。



像鸟一样的数据，迁移 Redux 到 MobX Redux 和 MobX 有什么共同点？ 首先，我们来看看它们有什么共同点。他们： 是开源库 提供客户端状态管理 通过redux-devtools-extension支持时间旅行调试 不依赖于特定的框架 对 React/React Native 框架 WhatsApp 号码数据 有广泛的支持。 使用 MobX 的 4 个理由 现在让我们看看 Redux 和 MobX 之间的主要区别。 1. 易学易用 对于初学者来说，只需 30 分钟即可学会如何使用 MobX。一旦你学会了基础知识，就这样了。你不需要学习任何新东西。使用 Redux，基础知识也很简单。但是，一旦开始构建更复杂的应用程序，您将不得不处理： 使用redux-thunk处理异步操作 使用redux-saga简化代码 定义选择器来处理计算值等。 有了 MobX，所有这些情况都被“神奇”地解决了。您不需要额外的库来处理这种情况。 2. 编写的代码更少 要在 Redux 中实现某个功能，您需要更新至少四个工件。这包括为化简器、操作、容器和组件编写代码。





如果您正在开发一个小项目，这尤其令人烦恼。MobX 仅要求您更新至少两个工件（即存储和视图组件）。 3.全面支持面向对象编程 如果您更喜欢编写面向对象的代码，您会很高兴知道可以使用 OOP 通过 MobX 实现状态管理逻辑。通过使用 和 等装饰器可以轻松地使纯 JavaScript 组件和存储变得响应式。如果您更喜欢函数式编程，没问题——我们也支持函数式编程。另一方面，Redux 非常适合函数式编程原则。但是，如果您想要基于类的方法，可以使用redux-connect-decorator库。 4. 处理嵌套数据很容易 在大多数 JavaScript 应用程序中，您会发现自己正在处理关系数据或嵌套数据。为了能够在 Redux 存储中使用它，您必须首先对其进行规范化。接下来，您必须编写更多代码来管理标准化数据中引用的跟踪。 在 MobX 中，建议以非规范化形式存储数据。MobX 可以为您跟踪关系，并自动重新渲染更改。通过使用域对象来存储数据，您可以直接引用其他存储中定义的其他域对象。