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的状态树,(仅是个人观点)。
- 包含的同样名字的角色文件
actionTypes.js
定义action的类型。actions.js
定义action的构造函数,决定这个功能模块可以接受的动作。reducer.js
定义这个功能模块如何相应actions.js中定义的动作。component
目录,有的人喜欢命名为view,根据个人喜欢,这里不做要求;包换这个功能模块的所有的react的组件。index.js
把这个文件所有的角色导入,然后统一导出。
- 状态树的设计
以下是我们需要遵循的几个原则
- 一个模块控制一个状态节点
- 避免冗余的数据
- 树形结构扁平
- 使用步骤
- 创建action
- 创建reducer
- 创建store
- 通过connect方法将react和redux连接起来。
- 添加provider作为项目的跟组件,用于数据的存储。