1️⃣ 安装依赖

redux
yarn add redux —save
异步 redux 依赖
yarn add redux-thunk —save
react-redux
yarn add react-redux —save

1️⃣ redux理解

2️⃣ 学习文档

安装： yarn add redux react-redux redux-thunk
英文文档： https：//redux.js.org/
中文文档： http：//www.redux.org.cn/
Github： https：//github.com/reactjs/redux

2️⃣ redux是什么

redux是一个专门用于做状态管理的JS库(不是react插件库)。
它可以用在react, angular, vue等项目中, 但基本与react配合使用。
作用： 集中式管理react应用中多个组件共享的状态。

2️⃣ 什么情况下需要使用redux

某个组件的状态，需要让其他组件可以随时拿到（共享）。
一个组件需要改变另一个组件的状态（通信）。
总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

2️⃣ redux工作流程

image.png

1️⃣ redux的三个核心概念

2️⃣ action

动作的对象
包含2个属性

  1.   1. type：标识属性, 值为字符串, 唯一, 必要属性
  2.   2. data：数据属性, 值类型任意, 可选属性

例子：{ type： ‘ADD_STUDENT’,data：{name： ‘tom’,age：18} }

2️⃣ reducer

用于初始化状态、加工状态。
加工时，根据旧的state和action， 产生新的state的纯函数。

2️⃣ store

将state、action、reducer联系在一起的对象
如何得到此对象?

  1.   1. import {createStore} from 'redux'
  2.   2. import reducer from './reducers'
  3.   3. const store = createStore(reducer)

此对象的功能?

  1.   1. getState()： 得到state
  2.   2. dispatch(action)： 分发action, 触发reducer调用, 产生新的state
  3.   3. subscribe(listener)： 注册监听, 当产生了新的state时, 自动调用

1️⃣ redux的核心API

2️⃣ createstore()

作用：创建包含指定reducer的store对象

2️⃣ store对象

作用： redux库最核心的管理对象
它内部维护着：

  1.   1. state 
  2.      1. 状态
  3.   2. reducer 
  4.      1. 操作状态的方法

核心方法：

  1.   1. getState() 
  2.      1. store.getState()
  3.         1. 获取 state 状态数据
  4.   2. dispatch(action) 
  5.      1. store.dispatch({type：'INCREMENT', number})
  6.         1. 触发 action 更新数据
  7.   3. subscribe(listener)
  8.      1. store.subscribe(render)
  9.         1. 监听数据改变,  可以用来重新渲染页面

1️⃣ redux异步编程

理解：

  1.   1. redux默认是不能进行异步处理的,  
  2.   2. 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

使用异步中间件
npm install —save redux-thunk

1️⃣ react-redux

理解

一个react插件库
专门用来简化react应用中使用redux

2️⃣ react-Redux将所有组件分成两大类

UI组件

  1.   1. 只负责 UI 的呈现，不带有任何业务逻辑
  2.   2. 通过props接收数据(一般数据和函数)
  3.   3. 不使用任何 Redux 的 API
  4.   4. 一般保存在components文件夹下

容器组件

  1.   1. 负责管理数据和业务逻辑，不负责UI的呈现
  2.   2. 使用 Redux 的 API
  3.   3. 一般保存在containers文件夹下

2️⃣ react-redux 基本使用

明确两个概念：

  1.   1. UI组件：不能使用任何redux的api，只负责页面的呈现、交互等。
  2.   2. 容器组件：负责和redux通信，将结果交给UI组件。

如何创建一个容器组件————靠react-redux 的 connect函数

  1.   1. connect(mapStateToProps,mapDispatchToProps)(UI组件)
  2.      1. mapStateToProps：映射状态，返回值是一个对象
  3.      2. mapDispatchToProps：映射操作状态的方法，返回值是一个对象

备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
备注2：mapDispatchToProps，也可以是一个对象

2️⃣ react-redux优化

容器组件和UI组件整合一个文件
无需自己给容器组件传递store，给包裹一个即可。
使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
mapDispatchToProps也可以简单的写成一个对象
一个组件要和redux“打交道”要经过哪几步？

  1.   1. 定义好UI组件---不暴露
  2.   2. 引入connect生成一个容器组件，并暴露，写法如下：
  3.   3. 在UI组件中通过 this.props.xxxxxxx 读取和操作状态
  1. connect(
  2.         state => ({key:value}), //映射状态
  3.         {key:xxxxxAction} //映射操作状态的方法
  4. )(UI组件)

1️⃣ 纯函数

纯函数

  1.   1.  一类特别的函数： 只要是同样的输入(实参)，必定得到同样的输出(返回) 必须遵守以下一些约束   
  2.      1. 不得改写参数数据 
  3.      2. 不会产生任何副作用，例如网络请求，输入和输出设备 
  4.      3. 不能调用Date.now()或者Math.random()等不纯的方法   
  5.   2. redux 的 reducer 函数必须是一个纯函数

1️⃣ redux 开发者工具

安装 Chrome 浏览器插件
image.png

安装依赖
yarn add redux-devtools-extension —save
在 store.js 中引入开发者工具并修改创建的仓储对象

  1. // 引入 redux-devtools-extension
  2. import { composeWithDevTools } from 'redux-devtools-extension'
  4. // 原来的
  5. export default createStore(allReducer, applyMiddleware(thunk))
  6. // 修改的
  7. export default createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))

image.png