webpack4+react+antd从零搭建React脚手架（四）-redux搭建

redux

文档地址
redux是对数据的状态管理，是react不可缺少的一部分，具体的概念这里就不进行详细的介绍。本文主要是介绍怎么引入redux和使用redux。

• 单向数据流：从父组件流向子组件，兄弟组件无法共享数据，
• state：react中的状态，是只读对象，不可直接修改。
• reducer：基本函数，用于对state的业务处理。
• action：描述事件行为改变state

安装

npm install --save redux
npm install --save react-redux
npm install --save-dev redux-devtools

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 action 如何改变 state 树，你需要编写 reducers。

安装redux调试工具

• 在Chrome安装扩展程序Redux DevTools

这里直接说一下如何设计redux的状态树，（仅是个人观点）。

1. 包含的同样名字的角色文件

• actionTypes.js 定义action的类型。
• actions.js 定义action的构造函数，决定这个功能模块可以接受的动作。
• reducer.js 定义这个功能模块如何相应actions.js中定义的动作。
• component 目录，有的人喜欢命名为view，根据个人喜欢，这里不做要求；包换这个功能模块的所有的react的组件。
• index.js 把这个文件所有的角色导入，然后统一导出。

2. 状态树的设计

以下是我们需要遵循的几个原则

• 一个模块控制一个状态节点
• 避免冗余的数据
• 树形结构扁平

3. 使用步骤

1. 创建action
2. 创建reducer
3. 创建store
4. 通过connect方法将react和redux连接起来。
5. 添加provider作为项目的跟组件，用于数据的存储。