Redux 入门

典型的 Web 应用程序通常由多个共享数据的 UI 组件组成。通常，多个组件负责显示同一对象的不同属性。该对象表示可以随时更改的状态。在多个组件之间保持状态一致可能是一场噩梦，尤其是在使用多个通道来更新同一对象的情况下。  以带有购物车的网站为例。顶部有一个 UI 组件，显示购物车中的商品数量。我们还可以有另一个 UI 组件来显示购物车中商品的总成本。如果用户单击“添加到购物车”按钮，这两个组件都应立即更新为正确的数字。如果用户决定从购物车中删除商品、更改数量、添加保护计划、使用优惠券或更改送货地点，则相关 UI 组件应更新以显示正确的信息。正如您所看到的，随着功能范围的扩大，简单的购物车很快就会变得难以保持同步。 在本指南中，我将向您介绍一个称为Redux的框架，它可以帮助您以易于扩展和维护的方式构建复杂的项目。为了让学习更容易，我们将使用一个简化的购物车项目来学习 Redux 的工作原理。



您至少需要熟悉React库，因为稍后需要将其与 Redux 集成。 先决条件 在我们开始之前，请确保您熟悉以下主题： 函数式 JavaScript 面向对象的 JavaScript ES6 JavaScript 语法 另外，请确保您的计算机上有以下设置： NodeJS 环境 纱线设置（推荐） 您可以在GitHub上访问本教 WhatsApp 号码数据 程中使用的完整代码。 什么是 Redux 终极版标志Redux 是一种流行的 JavaScript 框架，为应用程序提供可预测的状态容器。Redux 基于 Facebook 开发的框架 Flux 的简化版本。与数据可以在 UI 组件和存储之间双向流动的标准 MVC 框架不同，Redux 严格允许数据仅在一个方向上流动。参见下图： Redux 流程图 图 1：Redux 流程图 在 Redux 中，所有数据（即状态）都保存在称为store 的容器中。应用程序中只能有其中之一。存储本质上是一个状态树，其中保存了所有对象的状态。任何 UI 组件都可以直接从存储访问特定对象的状态。




要从本地或远程组件更改状态，需要调度一个操作。在这种情况下，调度意味着向商店发送可操作的信息。当 store 收到一个数据时action，它会将其委托给相关的减速器。Areducer只是一个纯函数，它查看先前的状态，执行操作并返回新状态。为了看到这一切的实际效果，我们需要开始编码。 首先了解不变性 在开始之前，我需要您首先了解JavaScript 中不变性的含义。根据《牛津英语词典》，不变性意味着不可改变。在编程中，我们编写的代码始终会更改变量的值。这称为可变性。我们这样做的方式常常会导致项目中出现意想不到的错误。如果您的代码仅处理原始数据类型（数字、字符串、布尔值），那么您无需担心。但是，如果您正在使用数组和对象，对它们执行可变操作可能会产生意外的错误。为了演示这一点，请打开终端并启动 Node 交互式 shell： node 接下来，让我们创建一个数组，然后将其分配给另一个变量t 正如您所看到的，更新也array b导致了变化。