01-Redux应用架构

第10章　Redux应用架构

本章主要内容

• Redux的action、store、reducer和middleware
• Redux的action、store、reducer和middleware的简单测试

到目前为止，我们已经能够创建经过测试、处理动态数据、接收用户输入并能够与远程API通信的React应用。这包含了不少东西并涵盖了典型Web应用要处理的大部分功能，你可能觉得接下来只需勤加练习即可。虽然将技能用于实践有助于掌握React，但是对构建更大更复杂的应用来说，还有一个重要的领域需要掌握：应用架构。应用架构是“定义满足所有技术和运营需求的结构化解决方案的过程，同时优化常见的质量属性，如性能、安全性和可管理性”（摘自Microsoft Application Architecture Guide，第2版）。架构会问：“好吧，我们能做这个，但如何能更好且一致地实现它呢？”应用如何有效组织、数据如何流转以及职责如何分配给系统的不同部分，这都是架构上需要考虑的问题。

所有应用都有某种隐含的架构，只是因为应用拥有结构并以某种特定的方式工作。这里讨论的是构建复杂应用的策略和范式。React宁可成为专注UI的小而灵活的框架，因此当构建更复杂的应用时，它没有内置的策略供使用者遵循。

只是没有可供使用的内置策略，并不意味着没有其他选择。使用React构建复杂应用的方法有很多，其中很多都是基于Facebook工程师推广的Flux模型。Flux与流行的MVC架构的不同之处在于它提倡单向数据流，引入了新概念（dispatcher、action、store）以及其他方面。Flux和MVC关注的是比应用的外观甚或构建应用所用的一些特定的库或技术更高层面的东西。它们更关注应用如何组织、数据如何流转，以及职责如何分配给系统的不同部分。

本章探讨的是Flux模式中使用最广泛和最受好评的变种之一：Redux。虽然在React应用中使用Redux是极其常见的，但实际上它可以用于大多数JavaScript框架（内部使用或其他方式）。本章和下一章将介绍Redux的核心概念（action、中间件、reducer、store等），然后介绍将Redux与React应用集成。Redux中的action表示要完成的工作（获取用户数据、登录用户等），reducer决定状态应该如何变化，store集中保存状态的副本，中间件允许开发者将自定义行为注入流程中。

如何获取本章代码

和每章一样，读者可以去GitHub仓库检出源代码。如果想从头开始编写本章代码，可以使用第9章的已有代码（如果跟着编写了示例）或直接检出指定章的分支（chapter-10-11）。

记住，每个分支对应该章末尾的代码（例如，chapter-10-11对应第10章和第11章末尾的代码）。读者可以在选定目录下执行以下终端命令之一来获取当前章的代码。

如果还没有代码库，请输入下面的命令来获取：

git clone [email protected]:react-in-action/letters-social.git

如果已经克隆过代码仓库：

git checkout chapter-10-11

如果你是从其他章来到这里的，则需要确保已经安装了所有正确的依赖：

npm install