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

上一章ReactJS实战教程请查看:React Flux架构和MVC架构的区别
【React Redux架构基本概念解释 – ReactJS实战教程】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架构
React Redux架构基本概念解释 – ReactJS实战教程

文章图片
下面将解释Redux体系结构的组件。
store储存:store是应用程序的整个状态列表的地方,它管理应用程序的状态并具有分派(操作)功能,它就像一个负责所有活动部分的大脑。
动作action:动作从视图中发送或分派,视图是可以被reducer读取的有效负载。它是一个用于存储用户事件信息的纯对象。它包括诸如操作类型、发生时间、发生位置、坐标以及要更改的状态等信息。
reducer:reducer从动作中读取有效载荷,然后通过相应的状态更新存储。从初始状态返回新状态是一个纯函数。
Redux的安装要求:React Redux要求React 16.8.3或更高版本。
要在React应用程序中使用React Redux,需要安装以下命令。
$ npm install redux react-redux --save

    推荐阅读