嗨，habrozhiteli！ 《 React in Action》一书向前端开发人员介绍了React框架和相关工具。 首先，您将熟悉React库，然后在这种情况下刷新有关一些基本思想的材料，并学习有关使用组件的知识。 在实践中，您将掌握纯React（无需编译，无需语法帮助器），从最简单的静态组件转变为动态和交互式的组件。
本书的第二部分讨论了与React交互的各种方式。 您将学习生命周期的基本方法，学习如何创建数据流，表单以及测试应用程序。 首先，您将找到有关React应用程序体系结构，与Redux的交互，对服务器渲染的了解以及对React Native的回顾的材料。
摘录。 第11章集成Redux和React
- 减速器是Redux确定状态应如何更改的一种方式。
- 在React中使用Redux
- 转换Letters Social以使用Redux应用程序的体系结构。
- 向应用程序添加喜欢和评论。
在这里，您将继续您在上一章中所做的工作，以创建Redux体系结构的基本元素。 您将致力于与Redux操作和存储库的React集成，并了解reducer的工作方式。 Redux是Flux模板的一种变体，在设计时考虑了React；它与单向数据流和React API一起很好地工作。 尽管这不是一个普遍的选择，但是许多大型React应用程序都将Redux视为实现状态管理解决方案的最佳选择之一。 遵循他们的示例并将其应用于Letters Social。
获取源代码
和以前一样，您可以转到github.com/react-in-action/letters-social上的GitHub存储库，从本章中获取示例的源代码。 如果您打算自己从头开始工作，请阅读第7章和第8章中示例的源代码（如果您自己研究并完成了示例），或参考与本章相关的分支（第10章，第11章）。
请记住，每个分支都包含该章的最终代码（例如，-10-10章包含在第10章和第11章末尾获得的代码）。 您可以在命令行外壳中运行以下所选命令之一，以从当前章节获取示例代码。 如果根本没有存储库，请运行以下命令：
git clone git@github.com:react-in-action/letters-social.git
如果您已经克隆了存储库，则执行以下操作：
git checkout chapter-10-11
也许您是从另一章搬到这里的，所以值得检查一下是否已使用以下命令安装了所有必需的依赖项：
npm install
11.1。 变速箱决定状态如何变化
您可以创建和提交操作并处理错误，但是它们不会以任何方式影响状态。 要处理传入的动作，必须配置变速箱。 请记住，操作只是报告事件已发生并提供有关发生的事件的信息的简单方式，仅此而已。 减速器的任务是指示存储的状态将如何响应这些操作而改变。 在图。 11.1显示了变速箱如何适应我们已经看到的更通用的Redux图片。
但是什么是变速箱？ 如果您仍然喜欢Redux的简单性，那么您将不会失望：这些只是具有一个目的的简单功能。 变速箱是纯函数，将上一个状态和操作作为参数并返回下一个状态。 根据Redux文档，由于它们的方法签名看起来像传递给Array.prototype.reduce的数据（例如[1,2,3] .reduce（（a，b）=> a + b，0），所以它们被称为化简器。
变速箱必须是纯功能，这意味着在输入的情况下，它们每次都会产生相同的相应输出。 这与产生副作用并且经常发生API调用的动作或中间件形成对比。 在reducer中执行任何异步或不干净的操作（例如，调用Date.now或Math.random（））是一种反模式，可能会降低应用程序的性能或可靠性。 Redux文档包含以下子句：“收到相同的参数后，他必须计算下一个状态并将其返回。 没什么好奇怪的 无副作用。 没有API调用。 没有变化 只是计算而已。” 有关更多信息，请参见
redux.js.org/basics/reducers 。
11.1.1。 状态形式和初始状态
Reducers将开始着手更改唯一的Redux商店，因此现在该讨论商店的形式了。 设计任何应用程序的状态形式都会影响该应用程序的用户界面的工作方式（同时也会受到这项工作的影响），但是通常，建议尽可能将原始数据与用户界面数据分开存储。 一种方法是将诸如标识符之类的值与它们的数据分开存储，并使用标识符来搜索数据。
您将创建一个初始状态文件，以帮助确定状态的形状和结构。 在常量文件夹中，创建一个名为initialState.js的文件。
这是提交任何动作或进行更改之前Redux应用程序的状态。 您将输入有关错误和下载状态的信息，以及有关消息，注释和用户的一些信息。 您将把注释和消息的标识符存储在数组中，并将它们的基本信息存储在易于引用的对象中。 清单11.1显示了初始状态配置的示例。
11.1.2。 设置变速箱以响应传入的动作
设置初始状态时，必须创建多个reducer来处理传入的操作，以便可以更新存储库。 变速箱通常使用switch语句根据入站操作的类型来更新状态。 它们返回状态的新副本（具有更改的版本不同），然后将使用该副本来更新存储库。 变速箱还遵循“包罗万象”的原则，以确保未知动作简单地返回到其现有状态。 我已经注意到了这一点，但是重要的是要再次说齿轮箱进行计算，并且每次必须根据给定的输入返回相同的结果-不应有副作用或模糊的过程。
变速箱负责计算存储应如何更改。 在大多数应用程序中，您将具有许多reducer，每个reduce负责部分存储。 这有助于保持文件的简洁和重点。 最后，您将使用Redux中可用的CombineReducers方法将减速器组合为一个。 大多数reducer使用带有不同案例的case的switch语句和默认情况下对其他所有事物使用catch-all命令，以确保未知类型的行为（可能是偶然创建的，如果有的话）不会影响状态。
Reducer还会复制状态，并且不会直接修改存储库的现有状态。 如果你看图。 11.1，您会看到齿轮箱在工作时会使用状态。 这种方法类似于不可变数据结构通常的工作方式：创建直接副本，而不是直接更改。 清单11.2显示了如何配置减载器。 请注意，在这种情况下，您正在处理状态的平坦部分-布尔属性加载，因此只需为新状态返回true或false。 您通常会使用具有许多键或附加属性的状态对象，在这种情况下，reduce器需要做的不仅仅是返回true或false。
现在已经提交了下载操作，Redux存储库将能够对其进行处理。 当一个动作到达并通过任何现有的中间件时，Redux使用reduce来确定应该从该动作创建哪个新状态。 在配置任何化简版之前，存储库无法找出操作中包含的更改信息。 为了说明这一点，在图。 11.2变速箱已从流程中移除； 了解为什么操作无法到达存储库。
然后，您将创建另一个reducer来应用Redux技能。 最后，许多减速器将不会简单地返回true或false。 或至少在计算中，不仅会存在对或错。 Letters Social应用程序的另一个关键部分是显示和创建消息，您需要将其移植到Redux。 您必须保存该应用程序使用的大多数现有逻辑，并将其转换为Redux友好形式，就好像您已经调整了一个实际的React应用程序以使用Redux一样。 创建两个reducer来处理消息本身，并创建一个来跟踪消息标识符。 在较大的应用程序中，您可以将它们组合在不同的键下，但是现在最好将它们分开存储。 这也是如何配置多个齿轮箱来处理单个操作的示例。 清单11.3显示了如何编写一个reducer进行注释。 在这里，您将创建许多化简器，完成后，该应用程序不仅会收到可能发生的事件的详细说明，而且还会收到更改状态的方法。
现在，当您提交与评论有关的操作时，商店的状态将相应地更新。 您是否注意到您如何响应严格不属于同一类型的动作？ 变速箱可以响应其能力范围内的动作，即使它们不是同一类型。 这是可能的，因为尽管状态消息分片控制了消息，但可能还有其他操作会影响它。 结论：变速箱负责解决特定状态指示器应如何变化的问题，而与采取何种行动或行动类型无关。 一些简化器可能需要了解与他们建模的资源（消息）无关的许多不同类型的动作。
现在，创建了注释减少器后，您可以执行一个处理消息的处理程序。 它与注释减少器非常相似，因为它使用相同的策略将它们分别存储为标识符和对象。 他还应该知道如何处理喜欢和不喜欢的消息（您在第10章中为此功能创建了动作）。 清单11.4显示了如何实现所有这些。
我（作者）在这些文件中包括了两个化简器，因为它们彼此之间有着非常紧密的联系，并且都作用于相同的基本数据（消息和注释），但是您可能希望使用一个化简器来简化工作。在文件中。 在大多数情况下，变速箱的安装将反映出存储结构或至少与之对应。 您可能已经注意到，存储状态表单的开发（请参阅本章前面设置的初始状态）会极大地影响化简器的定义方式，并在较小程度上影响操作。 由此得出的结论是，花费更多的时间来发展一种状态而不是赋予它一种光泽。 如果分配给设计的时间太少，则可能需要很长时间来完善状态表单以进行改进，而精心的设计和Redux模板使添加新功能成为一项简单的操作。
迁移到Redux：是否有必要？
我在本章中多次提到，Redux可能需要很多工作来进行初始设置（您可能已经经历过），但最终它将取得成果。 对于我和其他熟悉的开发人员从事的项目而言尤其如此。 我参与的一个项目包括将应用程序从Flux架构完全迁移到Redux。 整个团队工作了大约一个月，但是我们能够开始重写应用程序，从而将不稳定程度降至最低，并将错误数量降至最低。
总体结果是，可以使用Redux帮助我们将模板放置在正确位置的模板来加快产品的迭代播放速度。 Redux迁移几个月后，我们完成了对该应用程序的一系列完整重新设计。 尽管我们重新设计了大多数React应用程序，但是Redux架构允许我们对应用程序的状态管理和业务逻辑进行很少的更改。 此外，Redux模板使在必要时轻松添加到应用程序状态成为可能。 Redux的集成证明了在其上配置和翻译应用程序的工作是合理的，并且继续付出了很多努力。
»这本书的更多信息可以
在出版商的网站上找到»
目录»
摘录小贩优惠券20％
-React