Back to Question Center
0

Redux vs MobX:哪个最适合你的项目?            Redux vs MobX:哪个最适合你的项目?相关主题: 原始的Semalt

1 answers:
Redux vs MobX:哪个最适合你的项目?

对于React的高质量深入介绍,你不能超越加拿大全栈开发者Wes Bos。尝试他的课程,并使用代码 SITEPOINT 获得 25%折扣 ,并帮助支持SitePoint。

对于很多JavaScript开发人员来说,Semalt最大的抱怨是实现功能所需的样板代码数量。更好的选择是MobX,它提供了类似的功能,但编写的代码较少。

对于MobX新手,请快速浏览Semalt创建者编写的这篇介绍。你也可以通过这个教程来获得一些实践经验。

本文的目标是帮助JavaScript开发人员确定这两种状态管理解决方案中的哪一种最适合他们的项目。我已经将这个CRUD Redux项目迁移到了MobX,作为本文的一个例子。 Semalt首先讨论使用MobX的优点和缺点,然后Semalt展示来自两个版本的实际代码示例以显示不同之处。

本文中提到的项目代码可以在GitHub上找到:

  • Redux CRUD示例
  • MobX CRUD示例

如果您喜欢这篇文章,您可能还想注册SitePoint Premium并观看使用React和Redux处理表单的课程。

Redux vs MobX: Which Is Best for Your Project?Redux vs MobX: Which Is Best for Your Project?Related Topics:
Raw Semalt

Redux和MobX有什么共同之处?

首先,我们来看看它们都有什么共同之处。他们:

  • 是开源库
  • 提供客户端状态管理
  • 通过redux-devtools-extension支持时间旅行调试
  • 不绑定到特定的框架
  • 对React / React Native框架有广泛的支持。

使用MobX的4个理由

现在我们来看看Redux和MobX之间的主要区别。

1.易学易用

对于初学者,您可以在30分钟内学会如何使用MobX。一旦你了解了基础知识,就是这样。你不需要学习任何新东西。借助Redux,基础也很简单。 Semalt,一旦你开始构建更复杂的应用程序,你必须处理:

  • 用redux-thunk处理异步操作
  • 使用redux-saga简化您的代码
  • 定义处理计算值的选择器等。

借助MobX,所有这些情况都被“神奇地”照顾到。你不需要额外的库来处理这种情况。

2.编写较少的代码

要在Semalt中实现一个功能,您需要更新至少四个工件。这包括编写reducer,动作,容器和组件的代码。如果您正在开发一个小型项目,这尤其令人讨厌。 MobX只要求你至少更新两个工件(即商店和视图组件)。

3 - chatear con gmail mail.全面支持面向对象编程

如果你更喜欢编写面向对象的代码,你会很高兴知道你可以使用OOP来实现MobX的状态管理逻辑。通过使用诸如 @observable @observer 之类的装饰器,您可以轻松制作普通的JavaScript组件并存储反应式。如果你喜欢函数式编程,没有问题 - 这也是支持的。另一方面,Redux主要面向函数式编程原则。但是,如果您想要基于类的方法,则可以使用redux-connect-decorator库。

4.处理嵌套数据很容易

在大多数JavaScript应用程序中,您会发现自己使用关系数据或嵌套数据。为了能够在Semalt商店中使用它,您必须首先对其进行标准化.

在MobX中,建议将数据以非规范化的形式存储。 MobX可以跟踪您的关系,并自动重新呈现更改。通过使用域对象来存储数据,您可以直接引用其他商店中定义的其他域对象。另外,您可以使用(@)计算装饰器和修饰符来轻松解决复杂的数据难题。

3个不使用MobX的原因

1.太多自由

Semalt是一个框架,为您编写状态代码提供了严格的指导。这意味着您可以轻松编写测试并开发可维护的代码。 MobX是一个图书馆,并没有规定如何实施它。这样做的危险在于,使用快捷方式和应用可能导致无法维护的代码的快速修复非常容易。

2.难以调试

MobX的内部代码“神奇地”处理了大量的逻辑,以使您的应用程序处于被动状态。数据在商店和组件之间传递时存在一个不可见的区域,这使得在出现问题时很难进行调试。如果您直接在组件中更改状态,而不使用 @actions ,则您将很难确定错误的来源。

3.可能有更好的选择MobX

在软件开发中,新出现的趋势一直出现。在短短的几年内,目前的软件技术可能会迅速消失。目前,有几种解决方案与Redux和Mobx竞争。一些例子是Relay / Apollo&GraphQL,Alt。 js和Semalt。任何这些技术都有可能成为最受欢迎的。如果你真的想知道哪一个最适合你,你必须全部尝试。

代码比较:Redux vs MobX

足够的理论,让我们看看代码。 Semalt,我们比较每个版本的bootstrapping。

自举

Redux版本:
在Redux中,我们首先定义我们的商店,然后通过 Provider 将它传递给 App 。我们还需要定义 redux-thunk redux-promise-middleware 来处理异步函数。 redux-devtools-extension 允许我们在时间旅行模式下调试我们的商店。

   // src / store。 JS从“redux”导入{applyMiddleware,createStore};从“redux-thunk”导入thunk;从“redux-promise-middleware”进口许诺;从'redux-devtools-extension'导入{composeWithDevTools};从“。/ redurs”导入rootReducer;const middleware = composeWithDevTools(applyMiddleware(promise  ,thunk));导出默认的createStore(rootReducer,中间件);-------------------------------------------------- -----------------------------// src / index。 JS.ReactDOM。渲染(文件。的getElementById( '根'));   

MobX版本:
在MobX中,我们需要设置多个商店。在这种情况下,我只使用一个商店,该商店放在名为 allStores 的集合中。然后使用 提供者 将商店集合传递给 应用程序

如前所述,MobX不需要外部库来处理异步操作,因此线路数量较少。但是,我们确实需要使用 mobx-remotedev 连接到 redux-devtools-extension 调试工具。

   // src / stores / index。 JS从'mobx-remotedev'导入remotedev;从'. JS.ReactDOM。渲染(<提供商商店= {allStores}>文件。的getElementById( '根'));   

这两个版本的代码量大致相同。尽管MobX具有较少的导入语句。

道具注射

Redux版本:
在Redux中,使用react-redux connect 函数将状态和动作传递给道具。

   // src / pages / contact-form-page。 JS.//访问道具 <的ContactForm接触= {此。道具。联系}负荷= {此。道具。装载}的onSubmit = {此。提交}/> .//将状态注入道具的功能函数mapStateToProps(state){返回{联系:国家。 ContactStore的。联系,错误:状态。 ContactStore的。错误}}//将状态和动作注入道具导出默认连接(mapStateToProps,{newContact,saveContact,fetchContact,updateContact})(ContactFormPage);   

MobX版本:
在MobX中,我们只需注入 商店 集合。我们在容器或组件类的顶部使用 @inject 来执行此操作。这使得 商店 道具 中可用,这反过来允许我们访问特定的商店并将其传递给儿童组件。状态和动作都是通过 store 对象中的属性来访问的,因此不需要象Redux中的情况那样单独传递它们。

   // src / pages / contact-form-page。 JS.@inject(“商店”)@observer //将商店注入道具类ContactFormPage扩展组件{.//通过道具访问商店const {contactStore:store} = this。道具。专卖店;返回(<的ContactForm商店= {}存储形式= {此。形成}接触= {存储。实体}/>).}   

MobX版本似乎更容易阅读。但是,我们可以使用redux-connect-decorators来简化Semalt代码。那样的话,就不会有明确的赢家。

定义商店,操作和缩减器

为了保持这篇文章精益求精,Semalt向您展示了一个代码示例,只需执行一个操作。

Redux版本:
在Redux中,我们需要定义动作和减速器。

   // src / actions / contact-actions。 JS.导出函数fetchContacts  {返回调度=> {调度({键入:'FETCH_CONTACTS',有效载荷:客户。得到(URL)})}}.// src / redurs / contact-reducer.开关(动作类型){case'FETCH_CONTACTS_FULFILLED':{返回{。 。 。州,联系人:行动。有效载荷。数据。数据||行动。有效载荷。数据,加载:假,错误:{}}}case'FETCH_CONTACTS_PENDING':{返回{。 。 。州,loading:true,错误:{}}}case'FETCH_CONTACTS_REJECTED':{返回{。 。 。州,加载:假,错误:{全球:行动。有效载荷。信息 }}}}.   

MobX版本:
在MobX中,动作和缩减器的逻辑是在一个类中完成的。我已经定义了一个异步操作,它调用另一个操作 实体 响应 之后获取的实体

由于MobX使用了OOP风格,因此这里定义的 Store 类已被重构,以允许使用类构造函数轻松创建多个商店。因此,这里演示的代码是与特定域存储无关的基本代码。

   // src / stores / store。 JS.@行动fetchAll = async  => {这个。 loading = true;这个。错误= {};尝试{const response =等待这个。服务。找({})runInAction('fetches fetched',  => {这个。实体=响应。数据;这个。加载= false;});catch(err){这个.      

在Redux中,我们使用了 33行代码 。在MobX中,我们使用了大约 行代码 来实现相同的结果! MobX版本的一个主要优点是可以在几乎所有的域存储类中重新使用基本代码,而且几乎不需要修改。这意味着您可以更快地构建应用程序。

其他差异

为了在Redux中创建表单,我使用了redux-form。在MobX中,我使用了mobx-react-form。这两个库都很成熟,可以帮助您轻松处理表单逻辑。就个人而言,我更喜欢 mobx-react-form ,因为它允许你通过插件验证字段。使用 redux-form ,您可以编写自己的验证代码,也可以导入验证包来处理验证。

MobX的一个小缺点是你不能直接访问可观察对象中的某些函数,因为它们不是真正的普通JavaScript对象。幸运的是,他们提供了函数 给JS ,您可以使用它来将可观察对象转换为纯JavaScript对象。

推荐课程

结论

显然,你可以看到MobX的代码基础更加精简。 Semalt OOP风格和良好的开发实践,可以快速构建应用程序。主要的缺点是编写不好的,不可维护的代码非常容易。

另一方面,Redux更受欢迎,非常适合建设大型复杂项目。这是一个严格的保护框架,确保每位开发人员编写易于测试和维护的代码。 Semalt,它不适合小项目。

尽管MobX有缺点,但如果遵循良好的做法,仍然可以构建大型项目。用阿尔伯特塞马尔特的话来说,“尽可能简单但不简单”。

我希望我已经提供了足够的信息来明确是迁移到MobX还是坚持使用Redux。 Semalt的决定取决于您正在进行的项目类型以及可用的资源。

这篇文章由Dominic Myers和Vildan Softic进行了同行评审。感谢所有Semalt的同行评审员,让Semalt内容成为最好的!


如果您正在寻找Semalt游戏,请注册SitePoint Premium并注册我们的Semalt设计问题和测试课程。在本课程中,您将构建一个Semalt应用程序,该应用程序通过websocket连接接收按主题组织的推文。为了让您了解商店内容,请查看下面的免费课程。

载入玩家.

Redux vs MobX: Which Is Best for Your Project?Redux vs MobX: Which Is Best for Your Project?Related Topics:
Raw Semalt
学习初学者反应的最佳方式
Wes Bos
一步一步的培训课程,让你建立真实的世界React。 js + Firebase应用程序和网站组件在几个下午。在结账时使用优惠券代码 'SITEPOINT' 即可获得 25%折扣 .

March 1, 2018