2020年React Redux的5种替代方案

对于使用React，Vue或Angular作为前端框架的大多数应用程序，Redux已成为流行的状态管理解决方案。 Redux受欢迎的主要原因之一是其轻巧的大小只有2KB。

Redux的工作原理很简单：将应用程序的整个状态存储在一个中央存储中。 所有组件都可以访问该存储，因此无需在组件之间传递参数和属性。 Redux的主要构建模块是其动作，Reducer和存储。

[[329880]]

让我们看一下Redux是如何工作的，以便更好地了解它与其替代方案之间的区别。

因此，简而言之，来自组件的API调用将发送到Reducers。 它们是根据对象的旧状态返回新状态的函数。 新状态存储在存储中，该存储是Redux应用程序中访问先前状态的中央实体。

除了保持应用程序状态并控制对其的访问之外，存储还允许更新状态并通过订阅来处理侦听器的注册和注销。

为什么我们需要Redux的替代产品?

Redux及其用法听起来很简单，但是存在一些缺点：

• 这涉及相当多的学习曲线。 学习Redux可能会变得更加困难，因为必须具备函数式编程知识。
• 它增加了用于简单更改的样板。 由于redux中的流是预定义的，因此您必须坚持下去。 在较小的应用程序中，样板文件的数量似乎更多。
• Redux中即使是很小的更改也会触发DOM重组过程。 开发人员不赞成这样做，因为它很耗时，并且会对性能产生不利影响。

Redux的替代品

1. MobX

MobX通过应用反应式编程的概念来同步模型和UI。 它仅更新UI的必需部分，而不是完全重新加载它。 MobX致力于应用程序的面向对象概念和数据模型。 MobX简化了类和存储的文档，其中包括应用程序中使用的属性和方法。 它通过在开发过程中快速交付UI对象来支持快速开发，并允许添加生命周期挂钩" componentWillReact()"以进行响应式更新。 这简化了应用程序的路由和导航。

> https://mobx.js.org/

由于MobX基于类，因此对象的序列化并不像JavaScript那样简单。 建议编写自定义序列化和反序列化方法。 MobX要求数据通过API调用进行序列化。

建议使用MobX创建用于撤消/重做的自定义函数，以及数据更改的时程。 以下是MobX的主要功能：

• 它具有可伸缩性，易于使用且不允许规范化数据。
• 它映射状态和派生之间的关系，同时保持引用完整性，从而减少错误的数量。
• 它通过构建虚拟派生图来最小化保持派生与状态同步所需的重新计算次数，从而简化了状态修改。
• 它是一个JavaScript库，因此，您可以保留JavaScript的现有实用程序。
• 它可以在客户端和服务器端使用。

这是使用MobX记录时间的示例。 它使用Observable概念来跟踪时间：

基于其透明的反应式编程，MobX被广泛用作Redux的替代品。

2. Apollo GraphQL

Apollo GraphQL促进了将现代应用程序连接到云的数据图层。 React与需要从服务器获取数据的REST API一起使用。 在现代和连接的系统中，有必要获取大量数据。 但是，这是不可行的。 GraphQL通过允许组件声明数据来弥合这种差距。 强大的端到端键入功能可提高服务器与应用程序之间的性能。

该平台在集中位置管理数据。 您可以简单地连接平台或微服务，并在这些系统之间连接必要的数据。 GraphQL进行数据获取和数据转换。 通过创建抽象层，它有助于使服务解耦。 GraphQL独立于平台和语言。

ApolloBoost入门工具包可用于集成Apollo GraphQL。 您可以使用此工具包配置客户端。 它包括身份验证，内存缓存，状态管理和错误处理。 Apollo GraphQL还提供了自定义Apollo Boost所需的文档。

让我们考虑创建Apollo客户端的示例。 对于Apollo客户端，您需要GraphQL的端点。 例如：

https：//48p1r2roz4.sse.codesandbox.io，这是阿波罗(Apollo)提供的游乐场。

接下来，将您的Apollo Boost连接到React客户端。

连接查询组件后，服务器将在发送数据时自动对其进行缓存。 为了自定义端点，Apollo Boost提供了构建Apollo客户端所需的多个软件包。

3. 上下文API和React挂钩

自从钩子创建以来，便已与上下文API结合使用来管理状态。

为什么要使用钩子和上下文? 我个人更喜欢在中小型应用程序中使用它们，因为它们使我更容易将可重复使用的组件发布到Bit(UI组件以及"智能"组件)。

未发布的组件将不会很难在其他项目中重复使用，因此请牢记这一点。

> Example: Exploring React components published to Bit.dev

我们创建一个UI，以在单击按钮时显示令牌。 在React应用程序中，创建一个名为" context"的新文件夹并定义TokenContext.js。 我们将定义令牌状态并将其设置为" 0"。 组件将使用TokenContext.Provider访问状态。

现在，我们创建一个类来显示令牌。

下一步是创建用于增加和减少令牌的按钮。 让我们创建TokenButton.js文件。

创建一个显示类来设置UI。

现在，我们将创建一个名为TokenView.js的容器，以允许访问userContext挂钩。 现在，在视图文件夹中创建一个视图类，如下所示：

现在，将视图文件导入App.js。

它将输出以下结果。

4. PullState

PullState的工作方式与Redux类似，但是不支持类。 它使用钩子进行全局状态管理。 可以使用钩子启动多个存储，并使用" useState"从状态访问值。 您可以创建一个商店，并使用" userState()"钩子使用商店的状态。 使用挂钩，我们确保为组件使用所需的状态。

这是使用PullState更改样式属性的示例。 首先，为您的主题创建一个商店。

接下来，我们将读取状态并在单击按钮时切换状态。

5. RxJS

RxJS是一个反应式扩展JS库(RxJS)，它使用Observables进行异步调用。 它基于事件，并与Redux结合使用。 RxJS为应用程序提供了更好的性能和模块化，显示了更好的可调试调用堆栈，并具有向后兼容性。 RxJS中最常用的概念是Observable，Scheduler和Subject。

这是RxJS的自定义钩子的简单片段，其中：

• 使用" useEffect"钩子订阅一个Observable
• 设置更改状态
• 清理功能

结论

我们研究了Redux的一些最常用的替代方法，它们可以独立工作或可以与React应用程序中的redux交互。 MobX和Apollo GraphQL使用最广泛，并且分别以性能和连接许多不同平台的能力而著称。

许多其他人更喜欢Reactive Extension JS(RxJS)库，因为它使用Hooks代替Redux。 因此，最终归结为最适合您的项目的项目。