基本介绍
- 单向数据流：从父组件流向子组件，兄弟组件无法共享数据
- State：React中的状态，是只读对象（react可以用个setState更改）
- Reducer: 基本函数，用于对State的业务处理
- Action: 普通对象，用于描述事件行为，改变State
store（数据源）=> component => action => reducer =>store(全新数据源)
安装
yarn add redux --save
yarn add react-redux --save
redux集成
- 创建Action模块
- 创建Reducer模块
- 创建Store模块
- 通过connect方法将React组件和Redux连接起来
- 添加Provider作为项目的根组件，用于数据的存储x
Redux调试工具安装
-
在Chrome中安装Redux Devtools扩展
yarn add redux-devtools-extension
项目中使用（基于react学习笔记的项目==reactAntBike => 编写菜单切换文字）
1. 在src中创建redux的文件夹，并添加index.js文件
image.png
-
第一步： 创建action行为，在action目录下创建index.js
image.png -
第二步：创建对action数据源的数据处理，在reducer下创建index.js
image.png -
第三步：创建数据源store，在store文件夹下创建index.js
image.png -
第四步：在总index.js下引入provider，将react与redux的数据相结合
image.png
这样在控制台就可以查看react
image.png
2. 在菜单中添加选中高亮
-
第一步：获取当前地址
image.png -
第二步：给menu组件绑定点击事件以及设置选中值
image.png
image.png
3. 将点击的菜单名称记录在redux中
-
第一步：引入redux
import { connect } from 'react-redux' // 通过connect将react和redux相连 import { switchMenu } from './../../redux/action' // 引用触发事件行为 -
第二步：将组件放进redux里
去掉定义NavLeft的export default，在低端导出
image.png
-
第三步：在菜单点击事件中，将点击的菜单名称存储在redux中
注意，item变成对象，所以当前选中高亮要变成item.props.eventKey
image.png
4. 在header组件中获取redux的数据源
-
第一步：在组件中引用redux,并将export换成connect方式，并从redux中获取数据
image.png
image.png
-
第二步：赋值
image.png
这样就可以切换+高亮了
