redux学习笔记

基本介绍

• 单向数据流：从父组件流向子组件，兄弟组件无法共享数据
• 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

这样就可以切换+高亮了