文章目录

• 1、学习文档
• 2、redux是什么
• 3、什么情况下需要使用redux
• 4、redux工作流程
• 5、redux的三个核心概念
• • 5.1、action
  • 5.2、reducer
  • 5.3、store
• 6、redux的核心API
• • 6.1、createStore()
  • 6.2、store对象
  • 6.3、applyMiddleware()
  • 6.4、combineReducers()
• 7、求和Demo（纯react版）
• • 7.1、实现效果
  • 7.2、CODE
  • 7.3、Result
• 8、求和Demo（reudx mini版）
• • 8.1、Redux mini 示意图
  • 8.2、操作详解
  • 8.3、项目结构
  • 8.4、CODE
  • • 8.4.1、count_reducer.js
    • 8.4.2、store.js
    • 8.4.3、Count_Redux.jsx
  • 8.5、Result

1、学习文档

1. 英文文档
2. 印记中文-redux中文文档（维护较新）
3. 中文文档（Old）
4. Github

2、redux是什么

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

3、什么情况下需要使用redux

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

4、redux工作流程

5、redux的三个核心概念

5.1、action

1. 动作的对象
2. 包含2个属性
   1. type：标识属性, 值为字符串, 唯一, 必要属性
   2. data：数据属性, 值类型任意, 可选属性
3. 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

5.2、reducer

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

5.3、store

1. 将state、action、reducer联系在一起的对象
2. 如何得到此对象
   1. import {createStore} from 'redux'
   2. import reducer from './reducers'
   3. const store = createStore(reducer)
3. 此对象的功能?
   1. getState()：得到state
   2. dispatch(action)：分发action, 触发reducer调用, 产生新的state
   3. subscribe(listener)：注册监听, 当产生了新的state时, 自动调用

6、redux的核心API

6.1、createStore()

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

6.2、store对象

1. 作用: redux库最核心的管理对象
2. 它内部维护着:
   1. state
   2. reducer
3. 核心方法:
   1. getState()
   2. dispatch(action)
   3. subscribe(listener)
4. 具体编码:
   1. store.getState()
   2. store.dispatch({type:'INCREMENT', number})
   3. store.subscribe(render)

6.3、applyMiddleware()

• 作用：应用上基于redux的中间件(插件库)

6.4、combineReducers()

• 作用：合并多个reducer函数

7、求和Demo（纯react版）

7.1、实现效果

7.2、CODE

import React, { Component } from 'react'export default class Count extends Component {state = {sum: 0,num: 1}add = () => {const { sum, num } = this.statethis.setState({ sum: sum + num })}sub = () => {const { sum, num } = this.statethis.setState({ sum: sum - num })}oddAdd = () => {const { sum, num } = this.stateif (sum % 2 === 1) {this.setState({ sum: sum + num })}}asyncAdd = () => {const { sum, num } = this.statesetTimeout(() => {this.setState({ sum: sum + num })}, 2000)}render() {const { sum } = this.statereturn (
当前求和为：{sum}
 { this.setState({ num: e.target.value - 0 }) }}>123  +  -  奇数+  延迟+
)}
}

7.3、Result

8、求和Demo（reudx mini版）

redux安装指令：yarn add redux 或 npm i redux

8.1、Redux mini 示意图

8.2、操作详解

1. 去除Count组件自身的状态
2. src下建立:
   1. redux
      1. store.js
      2. count_reducer.js
3. store.js
   1. 引入redux中的createStore函数，创建一个store
   2. createStore调用时要传入一个为其服务的reducer
   3. 记得暴露store对象
4. count_reducer.js
   1. reducer的本质是一个函数，接收：preState,action，返回加工后的状态
   2. reducer有两个作用：初始化状态，加工状态
   3. reducer被第一次调用时，是store自动触发的
      1. 传递的preState是undefined
      2. 传递的action是：{type:'@@REDUX/INIT_a.2.b.4}
5. 在index.js中监测store中状态的改变，一旦发生改变重新渲染
   1. 备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写

8.3、项目结构

8.4、CODE

8.4.1、count_reducer.js

/*** 1、该文件是为了创建一个为Count组件服务的reducer*      reducer本质就是一个函数* 2、reducer会接到两个参数*      - preState：之前的状态*      - action：动作对象*/
export default function countReducer(preState = 0, action) {// 从action中获取type/dataconst { type, data } = action// 根据type判断如何加dataswitch (type) {case 'increment': // +return preState + datacase 'decrement': // -return preState - datadefault:return preState}
}

8.4.2、store.js

/* 该文件专门用于暴露一个store对象，整个应用只有一个store对象
*///引入createStore，专门用于创建redux中最为核心的store对象
import { createStore } from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

8.4.3、Count_Redux.jsx

import React, { Component } from 'react'
// 引入store，用于获取redux中维护的状态
import store from '../../redux/store'export default class Count extends Component {state = {num: 1}componentDidMount() {// 监测redux的状态，变化触发renderstore.subscribe(() => {// redux状态改变就会调这个回调this.setState({})})// 注：这个监测可挂在入口文件上，这样就不用每个组件都写一遍了}add = () => {const { num } = this.statestore.dispatch({type: 'increment',data: num})}sub = () => {const { num } = this.statestore.dispatch({type: 'decrement',data: num})}oddAdd = () => {const { num } = this.stateif (store.getState() % 2 === 1) {store.dispatch({type: 'increment',data: num})}}asyncAdd = () => {const { num } = this.statesetTimeout(() => {store.dispatch({type: 'increment',data: num})}, 2000)}render() {return (
当前求和为：{store.getState()}
e => { this.setState({ num: e.target.value - 0 }) }}>1}>12}>23}>3  this.add}>+  this.sub}>-  this.oddAdd}>奇数+  this.asyncAdd}>延迟+
)}
}

8.5、Result