📅  最后修改于: 2020-10-20 04:53:15        🧑  作者: Mango

Redux是JavaScript应用程序的可预测状态容器。随着应用程序的增长，使其变得井井有条并保持数据流变得困难。 Redux通过使用名为Store的单个全局对象管理应用程序的状态来解决此问题。 Redux基本原理有助于维护整个应用程序的一致性，这使调试和测试更加容易。听众本教程旨在为读者提供有关什么是Redux及其工作方式的足够知识。学习完本教程后，您将对Redux的概念有所了解。先决条件在开...

📅  最后修改于: 2020-10-20 04:53:30        🧑  作者: Mango

Redux是JavaScript应用程序的可预测状态容器。随着应用程序的增长，使其变得井井有条并保持数据流变得困难。 Redux通过使用名为Store的单个全局对象管理应用程序的状态来解决此问题。 Redux基本原理有助于维护整个应用程序的一致性，这使调试和测试更加容易。更重要的是，它为您提供实时代码编辑和时间旅行调试器。可以灵活地使用任何视图层，例如React，Angular，Vue等。Redu...

📅  最后修改于: 2020-10-20 04:53:45        🧑  作者: Mango

在安装Redux之前，我们必须安装Nodejs和NPM。以下说明将帮助您进行安装。如果您的设备中已经安装了Nodejs和NPM，则可以跳过这些步骤。访问https://nodejs.org/并安装软件包文件。运行安装程序，按照说明进行操作并接受许可协议。重新启动设备以运行它。您可以通过打开命令提示符并键入node -v来检查安装是否成功。这将向您显示系统中最新版本的Node。要检查npm是否已成功...

📅  最后修改于: 2020-10-20 04:54:01        🧑  作者: Mango

让我们假设应用程序的状态是由一个名为initialState的普通对象描述的，如下所示：应用程序中的每一段代码都无法更改此状态。要更改状态，您需要调度一个动作。什么是动作？动作是一个简单的对象，它描述了使用type属性引起更改的意图。它必须具有类型属性，该属性可以告诉您正在执行哪种类型的操作。行动命令如下-动作和状态由一个称为Reducer的函数保持在一起。分派了旨在引起变更的动作。此更改由减速器...

📅  最后修改于: 2020-10-20 04:54:16        🧑  作者: Mango

Redux遵循单向数据流。这意味着您的应用程序数据将遵循单向绑定数据流。随着应用程序的增长和变得复杂，如果您无法控制应用程序的状态，则很难重现问题并添加新功能。Redux通过对状态更新的方式和时间进行限制，从而降低了代码的复杂性。这样，管理更新状态很容易。我们已经知道限制是Redux的三项原则。下图将帮助您更好地了解Redux数据流-当用户与应用程序交互时，将分派动作。使用当前状态和分派的动作调用...

📅  最后修改于: 2020-10-20 04:54:33        🧑  作者: Mango

存储是Redux中的不可变对象树。商店是保存应用程序状态的状态容器。 Redux在您的应用程序中只能有一个存储。每当在Redux中创建商店时，您都需要指定reducer。让我们看看如何使用Redux中的createStore方法创建商店。需要从支持商店创建过程的Redux库中导入createStore软件包，如下所示-createStore函数可以具有三个参数。以下是语法-减速器是返回应用程序下一...

📅  最后修改于: 2020-10-20 04:54:53        🧑  作者: Mango

根据Redux官方文档，操作是商店的唯一信息来源。它承载着来自应用程序的有效信息负载进行存储。如前所述，动作是普通的JavaScript对象，必须具有type属性以指示所执行动作的类型。它告诉我们发生了什么事。类型应在您的应用程序中定义为字符串常量，如下所示-除了此类型属性外，动作对象的结构完全取决于开发人员。建议您使操作对象尽可能轻，并仅传递必要的信息。要在商店中引起任何更改，您需要首先使用st...

📅  最后修改于: 2020-10-20 04:55:13        🧑  作者: Mango

函数是一个过程，该过程接受称为参数的输入，并产生一些称为返回值的输出。如果遵循以下规则，则该函数称为纯函数-对于相同的参数，函数将返回相同的结果。其评估没有副作用，即，它不会更改输入数据。没有局部和全局变量的突变。它不像全局变量那样依赖于外部状态。让我们以一个函数为例，该函数返回作为输入传递给该函数的值的两倍。通常，它写为f（x）=> x * 2。如果使用参数值2调用函数，则输出将为4，f（2）=...

📅  最后修改于: 2020-10-20 04:55:36        🧑  作者: Mango

减速器是Redux中的纯函数。纯函数是可预测的。减速器是更改Redux中状态的唯一方法。它是您唯一可以编写逻辑和计算的地方。 Reducer函数将接受应用程序和操作的先前状态，计算下一个状态并返回新对象。以下几件事永远不要在reducer内部执行-函数参数的突变API调用和路由逻辑调用非纯函数，例如Math.random（）以下是reducer的语法-让我们继续在动作创建者模块中讨论的在网页上显示...

📅  最后修改于: 2020-10-20 04:56:01        🧑  作者: Mango

Redux本身是同步的，那么异步操作（例如网络请求）如何与Redux一起使用？中间件在这里很方便。如前所述，减速器是编写所有执行逻辑的地方。 Reducer与执行该操作的人，执行该操作之前和之后花费多少时间或记录应用程序状态无关。在这种情况下，Redux中间件函数提供了一种在调度器到达化简器之前与调度的动作进行交互的媒介。定制中间件功能可以通过写入高阶函数来创建（一个函数，它返回另一个函数），其周...

📅  最后修改于: 2020-10-20 04:56:25        🧑  作者: Mango

Redux-Devtools为我们提供了Redux应用程序的调试平台。它使我们能够执行时间旅行调试和实时编辑。官方文档中的某些功能如下-它使您可以检查每个状态和动作有效负载。它使您可以通过“取消”操作来使时光倒流。如果更改减速器代码，则将重新评估每个“分阶段”操作。如果减速器抛出异常，我们可以识别错误以及发生此错误的过程。使用persistState（）存储增强器，您可以在页面重新加载之间持久保留...

📅  最后修改于: 2020-10-20 04:56:45        🧑  作者: Mango

由于我们主要编写函数，因此测试Redux代码很容易，而且大多数函数都是纯函数。因此，我们甚至无需嘲笑它们就可以对其进行测试。在这里，我们使用JEST作为测试引擎。它在节点环境中工作，并且不访问DOM。我们可以使用下面给出的代码安装JEST-使用babel，您需要按以下方式安装babel-jest-并将其配置为使用.babelrc文件中的babel-preset-env功能，如下所示-最后，运行np...

📅  最后修改于: 2020-10-20 04:57:14        🧑  作者: Mango

在前面的章节中，我们了解了什么是Redux及其工作原理。现在让我们检查视图部分与Redux的集成。您可以将任何视图图层添加到Redux。我们还将讨论react库和Redux。让我们说一下，如果各种反应组件需要以不同的方式显示相同的数据，而不是将其作为从顶层组件到下层组件的所有组件的传递。将其存储在反应组件之外是理想的。因为它有助于更快地检索数据，因为您无需将数据一直传递到不同的组件。让我们讨论一下...

📅  最后修改于: 2020-10-20 04:57:37        🧑  作者: Mango

这是react和Redux应用程序的一个小例子。您也可以尝试开发小型应用程序。下面给出了增加或减少计数器的示例代码-这是根文件，负责创建存储并渲染我们的react app组件。这是我们的根源。它负责将计数器容器组件呈现为子级。以下是容器组件，负责提供Redux的状态以响应组件-下面给出的是负责视图部分的react组件-以下是负责创建动作的动作创建者-下面，我们显示了reducer文件的代码行，该文...

📅  最后修改于: 2020-10-20 04:57:53        🧑  作者: Mango

以下资源包含有关Redux的其他信息。请使用它们来获得有关此方面的更深入的知识。Redux上的有用链接Redux–Redux的官方站点。Redux @ Wikipedia-Redux，其历史和各种其他术语已用简单的语言进行了解释。关于Redux的有用书籍要在此页面上注册您的网站，请发送电子邮件至...