React Redux架构基本概念解释 – ReactJS实战教程

上一章ReactJS实战教程请查看：React Flux架构和MVC架构的区别

Redux是一个用于管理应用程序状态的开源JavaScript库，React使用Redux构建用户界面，它是由丹·阿布拉莫夫和安德鲁·克拉克在2015年首次提出的。

React Redux是Redux的官方绑定。它允许React组件从Redux存储区读取数据，并将操作分派到存储区更新数据。Redux通过提供一种通过单向数据流模型管理状态的合理方式，帮助应用程序扩展。React Redux在概念上很简单。它订阅Redux存储，检查组件想要的数据是否已经更改，然后重新呈现组件。

Redux的灵感来自Flux。Redux研究了Flux架构，省去了不必要的复杂性。

• Redux没有Dispatcher概念。
• Redux只有一个存储，而Flux有很多存储。
• 操作对象将由Store直接接收和处理。

为什么使用React Redux？

使用React Redux的主要原因是:

• React Redux是React应用程序的官方UI绑定，它与任何API更改保持最新，以确保你的React组件的行为符合预期。
• 它鼓励良好的“react”架构。
• 它在内部实现了许多性能优化，允许组件仅在实际需要时重新呈现。

Redux架构

下面将解释Redux体系结构的组件。

store储存：store是应用程序的整个状态列表的地方，它管理应用程序的状态并具有分派(操作)功能，它就像一个负责所有活动部分的大脑。

动作action：动作从视图中发送或分派，视图是可以被reducer读取的有效负载。它是一个用于存储用户事件信息的纯对象。它包括诸如操作类型、发生时间、发生位置、坐标以及要更改的状态等信息。

reducer：reducer从动作中读取有效载荷，然后通过相应的状态更新存储。从初始状态返回新状态是一个纯函数。

Redux的安装

要求：React Redux要求React 16.8.3或更高版本。

要在React应用程序中使用React Redux，需要安装以下命令。

$ npm install redux react-redux --save