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.state
        this.setState({ sum: sum + num })
    }

    sub = () => {
        const { sum, num } = this.state
        this.setState({ sum: sum - num })
    }

    oddAdd = () => {
        const { sum, num } = this.state
        if (sum % 2 === 1) {
            this.setState({ sum: sum + num })
        }
    }

    asyncAdd = () => {
        const { sum, num } = this.state
        setTimeout(() => {
            this.setState({ sum: sum + num })
        }, 2000)
    }

    render() {
        const { sum } = this.state
        return (
            

                
当前求和为：{sum}

                 { this.setState({ num: e.target.value - 0 }) }}>
                    1
                    2
                    3
                
                  
                +  
                -  
                奇数+  
                延迟+
            
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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/data
    const { type, data } = action
    // 根据type判断如何加data
    switch (type) {
        case 'increment': // +
            return preState + data
        case 'decrement': // -
            return preState - data
        default:
            return preState
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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)
1
2
3
4
5
6
7
8
9
10

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的状态，变化触发render
        store.subscribe(() => {
            // redux状态改变就会调这个回调
            this.setState({})
        })
       	// 注：这个监测可挂在入口文件上，这样就不用每个组件都写一遍了
    }

    add = () => {
        const { num } = this.state
        store.dispatch({
            type: 'increment',
            data: num
        })
    }

    sub = () => {
        const { num } = this.state
        store.dispatch({
            type: 'decrement',
            data: num
        })
    }

    oddAdd = () => {
        const { num } = this.state
        if (store.getState() % 2 === 1) {
            store.dispatch({
                type: 'increment',
                data: num
            })
        }
    }

    asyncAdd = () => {
        const { num } = this.state
        setTimeout(() => {
            store.dispatch({
                type: 'increment',
                data: num
            })
        }, 2000)
    }

    render() {
        return (
            <div>
                <h1>当前求和为：{store.getState()}</h1>

                <select onChange={e => { this.setState({ num: e.target.value - 0 }) }}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </select>
                &nbsp;&nbsp;
                <button onClick={this.add}>+</button>&nbsp;&nbsp;
                <button onClick={this.sub}>-</button>&nbsp;&nbsp;
                <button onClick={this.oddAdd}>奇数+</button>&nbsp;&nbsp;
                <button onClick={this.asyncAdd}>延迟+</button>
            </div >
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

8.5、Result