第7章：redux

7.1. redux理解

在没有学习redux之前，我的一些感想：

redux其实是一个单独的js库，用在react里面的就是react-redux库，都是同一个团队的作品。

redux其实和vuex或pinia一样，都是用作状态管理的工具。官方介绍：“React Redux 是 Redux 的官方 React UI 绑定库。它使得你的 React 组件能够从 Redux store 中读取到数据，并且你可以通过dispatch actions去更新 store 中的 state。”。所以用起来应该不难，但是用好就不容易了，想要用好，就先看一看别人项目的例子吧。

7.1.1. 学习文档

1. 英文文档: https://redux.js.org/
2. 中文文档: https://cn.redux.js.org/，https://www.redux.org.cn/
3. Github: https://github.com/reactjs/redux

7.1.2. redux是什么

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。

这里的状态管理是什么？你想到了什么？

提到状态，就要想到组件里面的state，这就是组件的状态。那么redux就是将组件的共享状态集中进行管理（组件把一些状态交给redux进行管理，不意味着自己不能有别的状态，自己的一些非共享状态还是该有就有），需要这些状态时，就从redux来拿。

为什么需要状态的集中管理呢？

有一些组件之间的通信，各自嵌套的很深，联系起来很麻烦。是可以使用PubSubJS，但是多个组件之间消息发布与订阅，还是麻烦。于是就出现了redux。比如说用户的登录信息，我在login页面登录的时候就拿到了，但是我会在多个别的页面进行使用，这些页面难道都与login页面进行消息发布与订阅吗？肯定有更好的办法，我把用户的登录信息放在状态集中管理的地方，别的页面要用就去拿，这不是更好吗？

2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

7.1.3. 什么情况下需要使用redux

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

7.1.4. redux工作流程（重点）

如果这个流程搞不清楚，就算我再死记硬背，还是非常容易忘记。一定要多看几遍视频。

看了这个流程，我想到了vuex或者pinia，我只谈它们的写法，可以创建多个仓库，每个仓库里面的初始化数据、方法等信息都在同一个文件里面，改起来非常方便。

但是这个redux，要把很多文件连接起来，我看了官方的redux的写法，有actions文件夹，constants文件夹，reducers文件夹，containers文件夹，分别放不同的文件，要联系起来真是不容易。为什么要这样设计呢？其实react的设计的思想就是追求小粒度控制，vuex和pinia为什么好用呢？因为他们的设计思想就是封装大量api，直接调用api即可，但是这样涉及到大量计算，所以性能方面会有影响。redux其实把“状态管理”的真实实现过程大部分交给程序员了，里面的优化就靠程序员的水平了，确实对JS要求很高啊。

所以更要将这个流程理解清楚。这个过程理解清楚了，其实vuex和pinia的过程也容易理解了。

7.2. redux的三个核心概念

7.2.1. action

1. 含义：动作的对象
2. 包含2个属性

type：标识属性, 值为字符串, 唯一, 必要属性

data：数据属性, 值类型任意, 可选属性

3. 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

7.2.2. reducer

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

7.2.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时, 自动调用。使用this.setState({})让组件重新渲染

7.3. redux的核心API

7.3.1. createstore()

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

7.3.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)

7.3.3. applyMiddleware()

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

7.3.4. combineReducers()

作用：合并多个reducer函数

7.4. 使用redux编写应用

效果

7.4.1 求和案例-纯react版

纯react版，就是在一个组件中写状态和更新状态的方法。根据之前的规则：状态在哪里，更新状态的方法就在哪里。

写这个，可能刚开始获取select里面的选项值还不熟练，需要搜索答案。其余的应该没有问题。

xxxxxxxxxx
12
1
// App.jsx
2
​
3
import React, { Component } from 'react'
4
import Count from './components/Count'
5
​
6
export default class App extends Component {
7
  render() {
8
    return (
9
      <Count />
10
    )
11
  }
12
}

xxxxxxxxxx
71
1
// Count/index.jsx
2
​
3
import React, { Component } from "react";
4
​
5
export default class Count extends Component {
6
  // 初始化状态
7
  state = {
8
    count: 0,
9
  };
10
​
11
  // 加法
12
  increment = () => {
13
    const { value } = this.selectNumber;
14
    const { count } = this.state;
15
    this.setState({
16
      count: count + Number(value),
17
    });
18
  };
19
​
20
  // 减法
21
  decrement = () => {
22
    const { value } = this.selectNumber;
23
    const { count } = this.state;
24
    this.setState({
25
      count: count - Number(value),
26
    });
27
  };
28
​
29
  // 当结果为奇数的时候加
30
  incrementIfOdd = () => {
31
    const { value } = this.selectNumber;
32
    const { count } = this.state;
33
    if (count % 2 === 1) {
34
      this.setState({
35
        count: count + Number(value),
36
      });
37
    }
38
  };
39
​
40
  // 异步加
41
  incrementAsync = () => {
42
    const { value } = this.selectNumber;
43
    const { count } = this.state;
44
    setTimeout(() => {
45
      this.setState({
46
        count: count + Number(value),
47
      });
48
    }, 1000);
49
  };
50
​
51
  render() {
52
    const {count} = this.state
53
    return (
54
      <div>
55
        <div>当前的结果为：{count}</div>
56
        <hr />
57
        <div>
58
          <select ref={(c) => (this.selectNumber = c)}>
59
            <option value="1">1</option>
60
            <option value="2">2</option>
61
            <option value="3">3</option>
62
          </select>&nbsp;
63
          <button onClick={this.increment}>+</button>&nbsp;
64
          <button onClick={this.decrement}>-</button>&nbsp;
65
          <button onClick={this.incrementIfOdd}>当结果为奇数的时候加</button>&nbsp;
66
          <button onClick={this.incrementAsync}>异步加</button>
67
        </div>
68
      </div>
69
    );
70
  }
71
}

7.4.2 求和案例-redux精简版

精简版省略掉了Action creators，为什么呢？因为action其实就是JS里面的Object对象，在此案例中完全可以模拟出来，着重了解其它的原理。

1、安装redux：npm install redux

2、编写组件内容：无论是交出共享状态的组件，还是要使用到共享状态的组件，首先不要考虑redux该怎么写，直接把外形框架写出来，里面该怎么写就怎么写，那么用到共享状态的地方，可以先搭好架子空出关键部分。这样就比较好写了，否则一开始就考虑到redux，可能写很多次之后才能顺畅。

xxxxxxxxxx
48
1
// Count/index.jsx
2
​
3
import React, { Component } from "react";
4
​
5
export default class Count extends Component {
6
  // 这里可以有组件自己的state，不是共享的状态就可以放在state里面。因为这里只用到count，所以没有写state。
7
​
8
  // 加法
9
  increment = () => {
10
    const {value} = this.selectNumber
11
  };
12
​
13
  // 减法
14
  decrement = () => {
15
    const {value} = this.selectNumber
16
  };
17
​
18
  // 当结果为奇数的时候加
19
  incrementIfOdd = () => {
20
    const {value} = this.selectNumber
21
  };
22
​
23
  // 异步加
24
  incrementAsync = () => {
25
    const {value} = this.selectNumber
26
  };
27
​
28
  render() {
29
    return (
30
      <div>
31
        <h3>当前的结果为：</h3>
32
        <hr />
33
        <div>
34
          <select ref={(c) => (this.selectNumber = c)}>
35
            <option value="1">1</option>
36
            <option value="2">2</option>
37
            <option value="3">3</option>
38
          </select>
39
          &nbsp;
40
          <button onClick={this.increment}>+</button>&nbsp;
41
          <button onClick={this.decrement}>-</button>&nbsp;
42
          <button onClick={this.incrementIfOdd}>当结果为奇数时加</button>&nbsp;
43
          <button onClick={this.incrementAsync}>异步加</button>
44
        </div>
45
      </div>
46
    );
47
  }
48
}

3、编写store

在redux中，store起到枢纽的作用，在这里只将reducer引进来，actions先不考虑。

新建一个redux文件夹，和App.jsx是同层级的。

xxxxxxxxxx
14
1
//  /redux/store.js
2
​
3
/**
4
 * 该文件专门用于暴露一个store对象，整个应用只有一个store对象。
5
 */
6
​
7
// 引入createStore，专门用于创建redux中最为核心的store对象。注意：我现在用的是 redux@4.2.1 ，createStore好像被deprecated 不推荐使用了，但是用起来显示警告不报错。最新的是legacy_createStore，可以换这个。
8
import { createStore } from "redux";
9
​
10
// 引入为Count组件服务的reducer
11
import countReducer from "./countReducer";
12
​
13
// 暴露store
14
export default createStore(countReducer);

这里有一句话：“整个应用只有一个store对象”，如果我有多个组件，分别有不同的状态进行共享，该怎么做呢？

后面会讲到combineReducers()，可以解决这个问题。

还有，store.getState()得到的是哪一个组件共享的数据呢？后面看一下解决方案。

仔细看一下redux的原理图，里面的actions是通过dispatch方法提交给store的，只有reducers是双向的，是不是说明createStore()里面只需要引入reducers呢？

那么我看了examples里面，老师讲解里面，是这样的，createStore()里面不需要引入actions。

4、编写reducer

xxxxxxxxxx
35
1
//  /redux/countReducer.js
2
​
3
/* 
4
    1.该文件用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数。
5
    2.reducer函数会接收到两个参数，分别为：之前的状态（prevState），动作对象（action）
6
 */
7
​
8
const initState = 0; // 初始化状态
9
​
10
// 这里用到了函数的参数默认值的写法。
11
export default function countReducer(prevState = initState, action) {
12
  // console.log(action)
13
  // 从action对象获取：type、data
14
  const { type, data } = action;
15
​
16
  // 根据type的值，决定如何加工数据
17
  switch (type) {
18
    // 如果是加法
19
    case "increment":
20
      return prevState + data;
21
    // 如果是减法
22
    case "decrement":
23
      return prevState - data;
24
    /* 
25
        下面的情况什么时候发生？什么时候触发default？
26
        仔细想一想，不是我写错action里面的type的时候或者写别的type的时候会触发，这种情况根本不会发生，为什么？因为我定义了什么，我肯定就用什么，不会用别的或者写错了。这就是为什么要写switch。
27
        答案：这种情况是在reducer初始化的时候发生的，在没有显式调用reducer的时候，输出action看一下，是什么？
28
        {type: "@@redux/INITa.7.x.a.4.6"}
29
        这种type值就是初始化的时候，redux加上去的，目的就是为了避免匹配到程序员编写的switch中的case，从而能够走default的流程，达到返回初始值的目的。
30
        而初始值在定义函数的时候，已经赋默认值了，所以整个流程走下来，非常OK。
31
    */
32
    default:
33
      return prevState;
34
  }
35
}

问题：这里为什么没有定义“奇数加”和“异步加”的方法呢？

7.8中会讲，redux中的reducer函数必须是一个纯函数。

5、通过redux的api来 do what?和getState()（这是原理图里面的话）

xxxxxxxxxx
80
1
// Count/index.jsx
2
​
3
import React, { Component } from "react";
4
// 引入store，用于获取redux中保存的状态
5
import store from "../../redux/store";
6
​
7
export default class Count extends Component {
8
  // 这里可以有组件自己的state，不是共享的状态就可以放在state里面。因为这里只用到count，所以没有写state。
9
​
10
  componentDidMount(){
11
    // 检测redux中状态的变化，只要变化，就调用render
12
    store.subscribe(()=>{
13
        // 这里使用了一个setState的方法，没有改变本组件的state中任何值，但是会触发页面更新。
14
        this.setState({})
15
    })
16
  }
17
  // 加法
18
  increment = () => {
19
    const { value } = this.selectNumber;
20
    // 用到dispatch方法，模拟了一个action对象
21
    store.dispatch({
22
      type: "increment",
23
      data: Number(value),
24
    });
25
  };
26
​
27
  // 减法
28
  decrement = () => {
29
    const { value } = this.selectNumber;
30
    store.dispatch({
31
      type: "decrement",
32
      data: Number(value),
33
    });
34
  };
35
​
36
  // 当结果为奇数的时候加
37
  incrementIfOdd = () => {
38
    const { value } = this.selectNumber;
39
    const count = store.getState();
40
    if (count % 2 === 1) {
41
      store.dispatch({
42
        type: "increment",
43
        data: Number(value),
44
      });
45
    }
46
  };
47
​
48
  // 异步加
49
  incrementAsync = () => {
50
    const { value } = this.selectNumber;
51
    setTimeout(() => {
52
      store.dispatch({
53
        type: "increment",
54
        data: Number(value),
55
      });
56
    }, 1000);
57
  };
58
​
59
  render() {
60
    return (
61
      <div>
62
        {/* 使用getState()来获取共享状态 */}
63
        <h3>当前的结果为：{store.getState()}</h3>
64
        <hr />
65
        <div>
66
          <select ref={(c) => (this.selectNumber = c)}>
67
            <option value="1">1</option>
68
            <option value="2">2</option>
69
            <option value="3">3</option>
70
          </select>
71
          &nbsp;
72
          <button onClick={this.increment}>+</button>&nbsp;
73
          <button onClick={this.decrement}>-</button>&nbsp;
74
          <button onClick={this.incrementIfOdd}>当结果为奇数时加</button>&nbsp;
75
          <button onClick={this.incrementAsync}>异步加</button>
76
        </div>
77
      </div>
78
    );
79
  }
80
}

redux的状态更改默认不会触发页面更新render，因为redux不是Facebook出的（虽然redux的作者是react的维护者之一），所以没有对它进行特别处理，怎么办？

使用store.subscribe()方法来订阅redux中状态的更新，触发this.setState({})事件，不会更新任何本组件的state数据，但是会触发页面重新渲染。

优化：

如果有很多个组件需要获取到最新的redux状态，怎么办呢？在每一个组件中的componentDidMount(){}中都写上store.subscribe()吗？有没有简单的方法呢？

有，在项目的index.js中统一写。

xxxxxxxxxx
30
1
// index.js
2
​
3
import React from 'react';
4
import ReactDOM from 'react-dom/client';
5
import './index.css';
6
import App from './App';
7
import reportWebVitals from './reportWebVitals';
8
import store from "./redux/store"
9
​
10
const root = ReactDOM.createRoot(document.getElementById('root'));
11
/**
12
root.render(
13
  <React.StrictMode>
14
    <App />
15
  </React.StrictMode>
16
);
17
*/
18
​
19
store.subscribe(()=>{
20
  root.render(
21
    <React.StrictMode>
22
      <App />
23
    </React.StrictMode>,
24
  )
25
})
26
​
27
// If you want to start measuring performance in your app, pass a function
28
// to log results (for example: reportWebVitals(console.log))
29
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
30
reportWebVitals();

xxxxxxxxxx
13
1
// index.js
2
// react@17版本的写法
3
​
4
import React from 'react'
5
import ReactDOM from 'react-dom'
6
import App from './App'
7
import store from './redux/store'
8
​
9
ReactDOM.render(<App/>,document.getElementById('root'))
10
​
11
store.subscribe(()=>{
12
    ReactDOM.render(<App/>,document.getElementById('root'))
13
})

这样做了之后，整个App都要更新，虽然有diffing算法，但是给人感觉就是引起了没有必要的更新，这里还是要看一下有没有更好的方法，或者说是不是这样其实也没有影响。

后记：

老师把整个写redux的流程介绍的非常清楚，先写最重要的store，然后写reducer，最后在组件里面使用store上面的api，将功能联系起来。

对着原理图，多看几遍视频，多做几次。

7.4.3 求和案例-redux完整版

完整案例是加上了actions。reducers和store都不用更改。

怎么做呢？精简版的action是模拟生成的，怎么模拟的？就是模拟一个对象而已，里面有type和data。type有几种类型？就两种类型，data是获取到的select的值，那么我就可以定义函数，data做参数，返回一个Object不就行了吗？有两种type，就定义两个函数。（当然可以通过switch来判断写成一个函数，但这是为了后面的异步action的写法，写成了两个）

那么使用的时候，就调用函数，传递select值做参数，生成一个Object就行了。就是这么做。

另外，由于多处用到了字符串"increment"和"decrement"，所以为了避免拼写错误，新建一个文件，专门放常量，在使用的时候，直接使用这些常量。这也算是一种编程规范吧。

xxxxxxxxxx
29
1
//  /redux/countAction.js
2
​
3
// 该文件专门为Count组件生成action对象
4
​
5
import {INCREMENT,DECREMENT} from "./constants"
6
​
7
export const createIncrementAction = (data) => ({
8
    type:INCREMENT,
9
    data
10
})
11
​
12
export const createDecrementAction = (data) => ({
13
    type:DECREMENT,
14
    data
15
})
16
​
17
/* 
18
    注意这种箭头函数的写法，是为了返回一个对象字面量。mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
19
    完整的写法是这样的：
20
    export const createIncrementAction = (data) => {
21
        return {
22
            type:INCREMENT,
23
            data
24
        }
25
    }
26
    那么箭头函数规定，如果代码写在一行里面，可以省略return，就可以改成这样
27
    export const createIncrementAction = data => {type:INCREMENT,data}
28
    但是这种返回对象字面量的方法是不行的，需要在对象外层包裹一对小括号。
29
*/

xxxxxxxxxx
6
1
//  /redux/constants.js
2
​
3
// 该模块式用于定义action对象和reducer中用到的type值，因为是常量，所以可以单独进行定义，多处都可以使用。作用：便于管理。
4
​
5
export const INCREMENT = "increment"
6
export const DECREMENT = "decrement"

那么在组件里面生成action的方法也要跟着改变：

xxxxxxxxxx
64
1
//  Count/index.jsx
2
​
3
import React, { Component } from "react";
4
import store from "../../redux/store";
5
// 引入actionCreator，专门用于创建action对象
6
import { createIncrementAction, createDecrementAction } from "../../redux/countAction";
7
​
8
export default class Count extends Component {
9
​
10
  componentDidMount() {
11
    // redux更新时，触发页面重新渲染
12
    store.subscribe(() => {
13
      this.setState({});
14
    });
15
  }
16
​
17
  // 加法
18
  increment = () => {
19
    const { value } = this.selectNumber;
20
    store.dispatch(createIncrementAction(Number(value)));
21
  };
22
​
23
  // 减法
24
  decrement = () => {
25
    const { value } = this.selectNumber;
26
    store.dispatch(createDecrementAction(Number(value)));
27
  };
28
​
29
  // 奇数加
30
  incrementIfOdd = () => {
31
    const { value } = this.selectNumber;
32
    const count = store.getState();
33
    if (count % 2 === 1) {
34
      store.dispatch(createIncrementAction(Number(value)));
35
    }
36
  };
37
​
38
  // 异步加
39
  incrementAsync = () => {
40
    const { value } = this.selectNumber;
41
    setTimeout(() => {
42
      store.dispatch(createIncrementAction(Number(value)));
43
    }, 500);
44
  };
45
  render() {
46
    return (
47
      <div>
48
        <h2>当前结果为：{store.getState()}</h2>
49
        <div>
50
          <select ref={(c) => (this.selectNumber = c)}>
51
            <option value="1">1</option>
52
            <option value="2">2</option>
53
            <option value="3">3</option>
54
          </select>
55
          &nbsp;
56
          <button onClick={this.increment}>+</button>&nbsp;
57
          <button onClick={this.decrement}>-</button>&nbsp;
58
          <button onClick={this.incrementIfOdd}>如果结果为奇数则加</button>&nbsp;
59
          <button onClick={this.incrementAsync}>异步加</button>
60
        </div>
61
      </div>
62
    );
63
  }
64
}

7.5. redux异步编程

原理图中说明了action是一个对象，里面有type和data属性。但是action还有一种类型，那就是function类型（需要结合中间件一起才能使用）。

一般redux同步编程时，使用对象类型的action；redux异步编程时，使用function类型的action。

7.5.1理解：

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

7.5.2. 使用异步中间件

作用： redux的store本身是不能处理异步action的，需要借助异步中间件，帮助处理。

安装：npm install --save redux-thunk

在store.js中配置中间件。

xxxxxxxxxx
19
1
//  /redux/store.js
2
​
3
/* 
4
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
5
*/
6
​
7
//引入createStore，专门用于创建redux中最为核心的store对象
8
import {createStore,applyMiddleware} from "redux"
9
//引入为Count组件服务的reducer
10
import countReducer from "./countReducer.js"
11
//引入redux-thunk，用于支持异步action
12
import thunk from "thunk"
13
​
14
// 暴露store
15
export default createStore(countReducer,applyMiddleware(thunk))
16
​
17
/*
18
    注意：这里的使用 applyMiddleware() 方法引入中间件是固定套路，createStore 里面的第二个参数引入中间件也是固定套路。
19
*/

7.5.3 在具体action文件中编写异步action

xxxxxxxxxx
34
1
// /redux/countAction.js
2
​
3
/* 
4
    该文件专门为Count组件生成action对象
5
*/
6
import {INCREMENT,DECREMENT} from "./constants"
7
import store from "./store"
8
​
9
// 同步action
10
export createIncrementAction = (data) => ({type:INCREMENT,data})
11
export createDecrementAction = (data) => ({type:DECREMENT,data})
12
​
13
// 异步action
14
export createIncrementAsyncAction = (data,time) => {
15
    // 返回一个函数类型的action，告诉store，延迟time之后再执行dispatch。
16
    return () => {
17
        setTimeout(() => {
18
            store.dispatch({type:INCREMENT,data})
19
        },time)
20
    }
21
}
22
​
23
/*
24
    注意：这里似乎很难理解，因为组件在使用生成异步action的方法 createIncrementAsyncAction 时，是这样使用的：
25
    store.dispatch(createIncrementAsyncAction(data,time))    // data，time此时都是具体的值
26
    外层有一个 store.dispatch ，定义 createIncrementAsyncAction 时里面还有一个 store.dispatch ，这不矛盾吗？
27
    其实你看函数action的写法就知道了，和Object的action写法有很大不同，返回的就是一个函数而已，里面怎么写，完全是新的内容，不要和Object类型的action搞混了。
28
    那么就应该像上面这样写，是一个固定套路，但是怎么执行的呢？这就需要用到中间件了，中间件会帮忙处理异步操作，像上面这个函数中的
29
    setTimeout(() => {
30
        store.dispatch({type:INCREMENT,data})
31
    },time)
32
    中间件就帮忙在延迟time之后，返回一个同步的action给组件中的store.dispatch来执行。
33
    thunk翻译为“形实转换程序”就很形象了。
34
*/

优化：

xxxxxxxxxx
22
1
//  /redux/countAction.js
2
​
3
/* 
4
    该文件专门为Count组件生成action对象
5
*/
6
import store from "./store"
7
import {INCREMENT,DECREMENT} from "./constants"
8
​
9
// 同步action
10
export createIncrementAction = (data) => ({type:INCREMENT,data})
11
export createDecrementAction = (data) => ({type:DECREMENT,data})
12
​
13
​
14
// 异步action，里面一般直接使用同步action
15
export createIncrementAsyncAction = (data,time) => {
16
    return () => {
17
        setTimeout(() => {
18
            // 调用同步action
19
            store.dispatch(createIncrementAction(data))
20
        })
21
    }
22
}

进一步优化：

xxxxxxxxxx
21
1
//  /redux/countAction.js
2
​
3
/* 
4
    该文件专门为Count组件生成action对象
5
*/
6
import {INCREMENT,DECREMENT} from "./constants"
7
​
8
// 同步action
9
export createIncrementAction = (data) => ({type:INCREMENT,data})
10
export createDecrementAction = (data) => ({type:DECREMENT,data})
11
​
12
​
13
// 异步action，里面一般直接使用同步action。在thunk中间件处理函数类型的action时，会传入一个dispatch参数，所以不用引入store，直接使用dispatch方法。
14
export createIncrementAsyncAction = (data,time) => {
15
    return (dispatch) => {
16
        setTimeout(() => {
17
            // 调用同步action
18
            dispatch(createIncrementAction(data))
19
        }, time)
20
    }
21
}

7.5.4 在组件中使用异步action

xxxxxxxxxx
13
1
// //引入actionCreator，专门用于创建action对象
2
import {createIncrementAsyncAction} from "../redux/countAction"
3
// 引入store，用于获取redux中保存的状态
4
import store from "../redux/store"
5
​
6
export default class Count extends Component{
7
    // 异步加
8
    incrementAsync = () => {
9
        const {value} = this.selectNumber
10
        // 500毫秒后异步加
11
        store.dispatch(createIncrementAsyncAction(value,500))
12
    }
13
}

小结：

xxxxxxxxxx
7
1
(1).目的：延迟的动作不想写在组件自身上，想交给action。在之前的案例中，是把延迟的动作setTimeout直接写在组件的方法上的。
2
(2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
3
(3).具体编码：
4
    1).yarn add redux-thunk，并配置在store中
5
    2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
6
    3).异步任务有结果后，分发一个同步的action去真正操作数据。
7
(4).备注：异步action不是必须要用的，完全可以自己等待异步任务有了结果，再去分发同步action。

7.6. react-redux

注意：react-redux的基础是redux，之前学习的内容是基础，react-redux只是简化了一些操作而已，不要以为react-redux是用来取代redux的，不是的。

整个react-redux的内容，老师讲的是很慢的，真正要写的代码其实是一步一步优化得来的。这种慢是非常必须的，因为其中的关键节点为什么要这么做，老师讲清楚了，我才好理解。老师完全可以一步到位，怎么做直接告诉我，这里这么写，那里那么写，但是我很难理解，理解不了就很难再写出来，也容易忘记。

每一小节涉及的代码并不多，但概念还是很多的。所以耐心点，听一遍听不懂，就听第二遍，第三遍......直到真正掌握。我的目的不应该是快速学完，而是真正掌握。

react之所以要设计容器组件，就是为了让UI和redux分离开来，让UI组件干干净净的，应该是react团队的一种设计思想，理解并运用这种设计思想就行了。可以这么理解：react团队是有追求的人，不可能让外部的东西来随意干扰自己的代码，对react的核心要有绝对的掌握。（虽然redux团队和react团队渊源很深）

7.6.1. 理解

1. 一个react插件库，Facebook官方出品。
2. 专门用来简化react应用中使用redux

上面说了react-redux是用来简化react应用中使用redux的流程的，但是呢，老师讲的很慢，造成我的一个感觉：怎么比单纯使用redux更麻烦、更复杂呢？

因为老师想把react-redux实现的过程讲清楚，等学到最后的时候，我肯定会豁然开朗的。

不要嫌老师讲的慢，讲的慢我才能消化，今天看了一下react-router-dom和redux的官方examples，很多用法我还是没有见过的，又看了一下antd的官方仓库代码，更是看不懂了。我是一定要看官方examples和antd官方仓库代码的，因为它们代表了一定的高水平，我如果写的代码太烂，remote工作被裁员也是很有可能的，所以一定要达到一定的水平才行。

深研JS比我想象的难得多，所以一直没有做、不敢做、不知道该怎么做，但是现在有一个月薪10万的机会放在眼前，为什么不做呢？可能看清楚antd编码风格，还需要学习一下设计模式，所以要做的还有很多啊。

7.6.2. react-Redux将所有组件分成两大类

1. UI组件

   1)只负责 UI 的呈现，不带有任何业务逻辑（这个“不带有任何业务逻辑”，指的是什么呢？这一点要理解清楚。这里应该指的是不带有业务实现的具体逻辑代码，具体实现逻辑放在redux中，由容器组件来连接UI组件和redux，UI组件中只能用 this.props.方法 来调用实现。如果你理解成为不写任何function，那怎么实现功能呢？怎么触发功能呢？还是需要依靠UI来触发事件的吧？）

   2)通过props接收数据(一般数据和函数)

   3)不使用任何 Redux 的 API

   4)一般保存在components文件夹下

2. 容器组件

   1)负责管理数据和业务逻辑，不负责UI的呈现。（注意：是“管理数据和业务逻辑”，只是管理而已，真正的共享数据和逻辑放在redux中）

   2)使用 Redux 的 API

   3)一般保存在containers文件夹下

注意：下面的例子中，从7.6.2.1-7.6.2.5，都是在之前案例基础上编写的，里面编写的redux文件夹里面的代码大部分并没有进行修改，如果有修改，我会列出来，因为react-redux首先要依靠redux才行，然后才是使用方式的简化处理。

7.6.2.1 连接容器组件与UI组件

这一步首先实现“容器组件”与UI组件的连接。从上一小节可以看出，UI组件不应该有任何业务逻辑，所以UI组件定义的方法里面涉及到redux的代码都要清除掉。需要新建containers文件夹，里面新建 Count/index.jsx 文件，里面写容器组件的代码。容器组件怎么实现呢？先考虑最简单的情形：联系redux和UI组件，然后暴露出一个组件。就要用到react-redux里面的connect()()方法来帮助生成一个组件（容器组件不需要自己写）。

1、安装：`npm i react-redux

2、编写UI组件，里面不应该包含redux的任何东西，包括actions、store等相关的所有东西。

xxxxxxxxxx
36
1
//  /components/Count/index.jsx
2
​
3
import React, { Component } from "react";
4
​
5
export default class Count extends Component {
6
  increment = () => {
7
    const { value } = this.selectNumber;
8
  };
9
  decrement = () => {
10
    const { value } = this.selectNumber;
11
  };
12
  incrementIfOdd = () => {
13
    const { value } = this.selectNumber;
14
  };
15
  incrementAsync = () => {
16
    const { value } = this.selectNumber;
17
  };
18
  render() {
19
    return (
20
      <div>
21
        <h2>当前结果是：</h2>
22
        <div>
23
          <select ref={(c) => (this.selectNumber = c)}>
24
            <option value="1">1</option>
25
            <option value="2">2</option>
26
            <option value="3">3</option>
27
          </select>&nbsp;
28
          <button onClick={this.increment}>+</button>&nbsp;
29
          <button onClick={this.decrement}>-</button>&nbsp;
30
          <button onClick={this.incrementIfOdd}>当结果为奇数的时候加</button>&nbsp;
31
          <button onClick={this.incrementAsync}>异步加</button>
32
        </div>
33
      </div>
34
    );
35
  }
36
}

注意：store.subscribe()方法如果放在了UI组件中的componentDidMount(){}里面，就需要转移到项目的index.js文件里面。

3、编写容器组件，并暴露出容器组件。

xxxxxxxxxx
12
1
//  /containers/Count/index.js
2
​
3
// 目的是创建一个容器组件，并暴露出去
4
​
5
// 引入Count的UI组件
6
import CountUI from "../../components/Count"
7
​
8
// 引入connect用于连接UI组件与redux
9
import { connect } from "react-redux"
10
​
11
// 使用connect()()创建并暴露一个Count的容器组件
12
export default connect()(CountUI)

store并不是直接在容器组件里面直接引入的，而是通过父传子的props传递过来的。固定套路（为什么这么写呢？因为用到了connect()()函数，当我们在里面传入函数做参数时，会在函数参数上自动传入store相关的状态和方法，这是一种设计模式，后面你会看到）。

4、在App.jsx中引入容器组件，并传递store给容器组件。

原来App.jsx里面引入的是UI组件Count，现在要改为容器组件Count，因为容器组件已经把UI组件联系起来了。

xxxxxxxxxx
17
1
// App.jsx
2
​
3
import React, { Component } from "react";
4
// 注意：引入的是容器组件
5
import Count from "./containers/Count";
6
import store from "./redux/store";
7
​
8
export default class App extends Component {
9
  render() {
10
    return (
11
      <div>
12
        {/* 用标签属性传值的方式，将store传递给容器组件 */}
13
        <Count store={store} />
14
      </div>
15
    );
16
  }
17
}

经过上面的处理之后，容器组件和UI组件已经联系起来了。打开网页没有报错，OK。

7.6.2.2 react-redux的基本使用

map除了“地图”的意思，还有“映射”的意思。那么mapStateToProps和mapDispatchToProps就很好理解了。

映射state到props，映射dispatch到props。那么就可以在UI组件中使用 this.props.方法 来实现逻辑。

在7.6.2.1中我们已经实现了容器组件连接UI组件，连接redux只是将store传递给了容器组件，无论是容器组件与UI组件还是容器组件与redux，它们之间的具体功能还没有实现。这一步来实现容器组件连接UI组件和redux，并实现功能。

1、容器组件给UI组件传递redux中保存的状态和操作状态的方法。

难点：怎么做呢？容器组件和UI组件是父子组件关系，父组件给子组件传递数据和方法，在之前的学习中，我们知道要通过标签属性传递，可是容器组件里面没有标签啊，容器组件是connect()()函数生成的，怎么办？

答案：connect()()函数规定了，需要在第一次调用的时候，传递两个函数进去。什么叫“第一次调用的时候”？就是connect()执行的时候，它执行之后会返回一个函数，可以再次调用。

所以需要在connect()()函数的第一个()里面传入两个函数。函数是什么呢？怎么写呢？仔细观察父组件给子组件传值，是通过标签属性传值的，本质上是一种key:value的形式传递的，是不是？<Count store={store} />，等号左边是key，等号右边是value，然后子组件里面可以通过 this.props.key 的方式拿到value。那么就可以通过返回对象的方式，传递数据和方法。

以下先不考虑redux里面的实际数据和方法，第二步会取到store里面的数据和方法，这里只是说明应该传递对象过去，而且子组件可以收到。

第一个函数是传递redux中所保存的状态。

xxxxxxxxxx
4
1
// 函数名是约定俗成的写法，传递状态就是这个函数名。map在这里的意思是“映射”
2
function mapStateToProps(){
3
    return {count:99}
4
}

第二个函数是传递redux中操作状态的方法。

xxxxxxxxxx
7
1
// 函数名是约定俗成的写法，传递操作状态的方法就是这个函数名。map在这里的意思是“映射”
2
function mapDispatchToProps(){
3
    return {
4
        // 既然是操作状态的方法，就是一个函数，需要value就是一个函数。
5
        increment:() => {console.log('我是操作状态的方法')}
6
    }
7
}

将两个函数作为参数，写到connect()()中。

xxxxxxxxxx
2
1
// 使用connect()()创建并暴露一个Count的容器组件
2
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

完整代码：

xxxxxxxxxx
27
1
//  /containers/Count/index.js
2
​
3
// 目的是创建一个容器组件，并暴露出去
4
​
5
// 引入Count的UI组件
6
import CountUI from "../../components/Count";
7
​
8
// 引入connect用于连接UI组件与redux
9
import { connect } from "react-redux";
10
​
11
// 函数名是约定俗成的写法，传递状态就是这个函数名。map在这里的意思是“映射”
12
function mapStateToProps() {
13
  return { count: 99 };
14
}
15
​
16
// 函数名是约定俗成的写法，传递操作状态的方法就是这个函数名。map在这里的意思是“映射”
17
function mapDispatchToProps() {
18
  return {
19
    // 既然是操作状态的方法，就是一个函数，需要value就是一个函数。
20
    increment: () => {
21
      console.log("我是操作状态的方法");
22
    },
23
  };
24
}
25
​
26
// 使用connect()()创建并暴露一个Count的容器组件
27
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

在UI组件输出 this.props，看拿到状态和方法没有。

这里的store是connect()()处理之后传递过来的，不是我的操作。后面的优化会用到这个属性。

2、容器组件联系redux

App.jsx里面已经传递store给容器组件了，那么容器组件里面不需要再引入了。但是怎么使用呢？如果是class类组件，要在类里面使用this.props，如果是函数式组件，要在函数参数里面写props才能使用。可是这里是connect()()生成的一个组件，我怎么用store？

答案是：在connect()()第一次调用传递的两个函数中，直接使用store里面的数据或方法。react-redux其实在这两个函数中传递了store里面的数据或方法。固定套路。第一个函数默认有state参数，第二个函数默认有dispatch参数。

xxxxxxxxxx
37
1
//  /containers/Count/index.js
2
​
3
// 目的是创建一个容器组件，并暴露出去
4
​
5
// 引入Count的UI组件
6
import CountUI from "../../components/Count";
7
​
8
// 引入connect用于连接UI组件与redux
9
import { connect } from "react-redux";
10
​
11
/* 
12
    1.mapStateToProps函数返回的是一个对象；
13
    2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
14
    3.mapStateToProps用于传递状态，这个函数里面的state参数，是connect()()处理之后会传递过来的
15
*/
16
// 函数名是约定俗成的写法，传递状态就是这个函数名。map在这里的意思是“映射”
17
function mapStateToProps(state) {
18
  return { count: state };
19
}
20
​
21
/* 
22
    1.mapDispatchToProps函数返回的是一个对象；
23
    2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
24
    3.mapDispatchToProps用于传递操作状态的方法，这个函数里面的dispatch参数，是connect()()处理之后会传递过来的
25
*/
26
// 函数名是约定俗成的写法，传递操作状态的方法就是这个函数名。map在这里的意思是“映射”
27
function mapDispatchToProps(dispatch) {
28
  return {
29
    // 既然是操作状态的方法，就是一个函数，需要value就是一个函数。
30
    increment: (data) => {
31
      return dispatch({type:"increment",data})
32
    },
33
  };
34
}
35
​
36
// 使用connect()()创建并暴露一个Count的容器组件
37
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

没有必要在映射的时候定义action，actions都在actionCreator文件中定义好了，直接引入使用即可。

xxxxxxxxxx
40
1
//  /containers/Count/index.js
2
​
3
// 目的是创建一个容器组件，并暴露出去
4
​
5
// 引入Count的UI组件
6
import CountUI from "../../components/Count";
7
​
8
// 引入connect用于连接UI组件与redux
9
import { connect } from "react-redux";
10
​
11
// 引入action
12
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from "../../redux/countAction";
13
​
14
/* 
15
    1.mapStateToProps函数返回的是一个对象；
16
    2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
17
    3.mapStateToProps用于传递状态，这个函数里面的state参数，是connect()()处理之后会传递过来的
18
*/
19
// 函数名是约定俗成的写法，传递状态就是这个函数名。map在这里的意思是“映射”
20
function mapStateToProps(state) {
21
  return { count: state };
22
}
23
​
24
/* 
25
    1.mapDispatchToProps函数返回的是一个对象；
26
    2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
27
    3.mapDispatchToProps用于传递操作状态的方法，这个函数里面的dispatch参数，是connect()()处理之后会传递过来的
28
*/
29
// 函数名是约定俗成的写法，传递操作状态的方法就是这个函数名。map在这里的意思是“映射”
30
function mapDispatchToProps(dispatch) {
31
  return {
32
    // 既然是操作状态的方法，就是一个函数，需要value就是一个函数。
33
    increment: (data) => dispatch(createIncrementAction(data)),// 加法
34
    decrement: (data) => dispatch(createDecrementAction(data)),// 减法
35
    incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time)),// 异步加
36
  };
37
}
38
​
39
// 使用connect()()创建并暴露一个Count的容器组件
40
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

3、UI组件里面使用容器组件传递过来的数据和方法

使用方式： this.props.

xxxxxxxxxx
45
1
//  /components/Count/index.jsx
2
​
3
import React, { Component } from "react";
4
​
5
export default class Count extends Component {
6
  increment = () => {
7
    const { value } = this.selectNumber;
8
    this.props.increment(Number(value));
9
  };
10
  decrement = () => {
11
    const { value } = this.selectNumber;
12
    this.props.decrement(Number(value));
13
  };
14
  incrementIfOdd = () => {
15
    const { value } = this.selectNumber;
16
    const { count } = this.props;
17
    if (count % 2 === 1) {
18
      this.props.increment(Number(value));
19
    }
20
  };
21
  incrementAsync = () => {
22
    const { value } = this.selectNumber;
23
    this.props.incrementAsync(Number(value), 500);
24
  };
25
  render() {
26
    const { count } = this.props;
27
    return (
28
      <div>
29
        <h2>当前结果是：{count}</h2>
30
        <div>
31
          <select ref={(c) => (this.selectNumber = c)}>
32
            <option value="1">1</option>
33
            <option value="2">2</option>
34
            <option value="3">3</option>
35
          </select>
36
          &nbsp;
37
          <button onClick={this.increment}>+</button>&nbsp;
38
          <button onClick={this.decrement}>-</button>&nbsp;
39
          <button onClick={this.incrementIfOdd}>当结果为奇数的时候加</button>&nbsp;
40
          <button onClick={this.incrementAsync}>异步加</button>
41
        </div>
42
      </div>
43
    );
44
  }
45
}

检查效果OK。

xxxxxxxxxx
9
1
(1).明确两个概念：
2
    1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
3
    2).容器组件：负责和redux通信，将结果交给UI组件。
4
(2).如何创建一个容器组件————靠react-redux 的 connect函数
5
    connect(mapStateToProps,mapDispatchToProps)(UI组件)
6
        -mapStateToProps:映射状态，返回值是一个对象
7
        -mapDispatchToProps:映射操作状态的方法，返回值是一个对象
8
(3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
9
(4).备注2：mapDispatchToProps，也可以是一个对象

7.6.2.3 优化1

对connect()()第一次调用时传入的两个函数进行优化，写成箭头函数的简写形式：

xxxxxxxxxx
23
1
//  /containers/Count/index.js
2
​
3
// 目的是创建一个容器组件，并暴露出去
4
​
5
// 引入Count的UI组件
6
import CountUI from "../../components/Count";
7
​
8
// 引入connect用于连接UI组件与redux
9
import { connect } from "react-redux";
10
​
11
// 引入action
12
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from "../../redux/countAction";
13
​
14
const mapStateToProps = (state) => ({ count: state });
15
​
16
const mapDispatchToProps = (dispatch) => ({
17
  increment: (data) => dispatch(createIncrementAction(data)), 
18
  decrement: (data) => dispatch(createDecrementAction(data)),  
19
  incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time)), 
20
});
21
​
22
// 使用connect()()创建并暴露一个Count的容器组件
23
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);

进一步简写，不用定义函数了，直接将函数写在connect()()的第一个()中：

xxxxxxxxxx
23
1
//  /containers/Count/index.js
2
​
3
// 目的是创建一个容器组件，并暴露出去
4
​
5
// 引入Count的UI组件
6
import CountUI from "../../components/Count";
7
​
8
// 引入connect用于连接UI组件与redux
9
import { connect } from "react-redux";
10
​
11
// 引入action
12
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from "../../redux/countAction";
13
​
14
// 使用connect()()创建并暴露一个Count的容器组件
15
export default connect(
16
  (state) => ({ count: state }),
17
  (dispatch) => ({
18
    increment: (data) => dispatch(createIncrementAction(data)),
19
    decrement: (data) => dispatch(createDecrementAction(data)),
20
    incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time)),
21
  })
22
)(CountUI);
23
​

前面说过了，connect()()第一次调用的时候，传入的两个参数都是函数，针对第二个参数说明一下。

按照函数的写法，当UI组件使用操作状态的方法时this.props.increment(data)，实际上使用的是这样的方法：(data) => dispatch(createIncrementAction(data))，使用的是一个函数。

现在规定了，connect()()第一次调用的时候第二个参数可以为一个对象，对象里面属性的key还是不变，但value变为actionCreator（也就是返回一个action），写成这样：

xxxxxxxxxx
8
1
export default connect(
2
  (state) => ({ count: state }), 
3
  {
4
    increment: createIncrementAction,
5
    decrement: createDecrementAction,
6
    incrementAsync: createIncrementAsyncAction,
7
  }
8
)(CountUI);

那么传递到UI组件的到底是什么呢？输出看一下：

对比一下第二个参数是函数时的输出：

可以看到，如果第二个参数是对象，那么传递到UI组件的increment等属性的value都变成了函数，原因是react-redux识别到了第二个参数是对象，就帮助处理了action，加上了dispatch方法。

所以无论第二个参数是写成函数还是对象的形式，UI组件使用的方法都不变。

xxxxxxxxxx
22
1
//  /containers/Count/index.js
2
​
3
// 目的是创建一个容器组件，并暴露出去
4
​
5
// 引入Count的UI组件
6
import CountUI from "../../components/Count";
7
​
8
// 引入connect用于连接UI组件与redux
9
import { connect } from "react-redux";
10
​
11
// 引入action
12
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from "../../redux/countAction";
13
​
14
// 使用connect()()创建并暴露一个Count的容器组件
15
export default connect(
16
  (state) => ({ count: state }), 
17
  {
18
    increment: createIncrementAction, 
19
    decrement: createDecrementAction, 
20
    incrementAsync: createIncrementAsyncAction, 
21
  }
22
)(CountUI);

7.6.2.4 优化2

1、之前在react项目的index.js文件里面要写这段代码：

xxxxxxxxxx
10
1
// index.js
2
import store from "./redux/store"
3
​
4
store.subscribe(()=>{
5
  root.render(
6
    <React.StrictMode>
7
      <App />
8
    </React.StrictMode>
9
  )
10
})

目的是订阅redux状态的更新，重新渲染页面（因为redux不是react官方出品的，react没有做相应的处理，redux的状态更新不会引起重新渲染）。

现在使用了react-redux，这段代码就可以清除了，因为react-redux针对redux状态的更新做了处理，不需要单独处理了。

2、需要传递store给容器组件，是在App.jsx里面容器组件的标签上通过标签属性的方式传递的，如果有多个容器组件，都要这样写，太麻烦了。现在react-redux提供了一个Provider标签，可以为App.jsx下所有的容器组件提供store这个属性，需要在项目的index.js里面这样写，App.jsx的子组件标签上的store属性可以去掉了。

xxxxxxxxxx
22
1
// index.js
2
​
3
import React from "react";
4
import ReactDOM from "react-dom/client";
5
import "./index.css";
6
import App from "./App";
7
import reportWebVitals from "./reportWebVitals";
8
// 引入store
9
import store from "./redux/store";
10
// 引入Provider
11
import { Provider } from "react-redux";
12
​
13
const root = ReactDOM.createRoot(document.getElementById("root"));
14
root.render(
15
  <React.StrictMode>
16
    <Provider store={store}>
17
      <App />
18
    </Provider>
19
  </React.StrictMode>
20
);
21
​
22
reportWebVitals();

7.6.2.5 优化3

一个文件里面可以写多个组件，于是可以将容器组件和UI组件写在一个js/jsx文件里面，最终暴露的是容器组件，所以可以将容器组件中引入的UI组件去掉，不引入，直接在容器组件的文件里面写UI组件。

xxxxxxxxxx
57
1
//  /containers/Count/index.js
2
​
3
// 创建并暴露一个容器组件
4
​
5
import { connect } from "react-redux";
6
// 不创建单独的UI组件的文件了，就需要删除掉引入。并且components里面的UI组件要删除掉，因为没有作用了。
7
// import CountUI from "../../components/Count";
8
// 引入React和Component，用于创建UI组件
9
import React, { Component } from "react";
10
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from "../../redux/countAction";
11
​
12
// 创建UI组件
13
class Count extends Component {
14
  increment = () => {
15
    const { value } = this.selectNumber;
16
    this.props.increment(Number(value));
17
  };
18
  decrement = () => {
19
    const { value } = this.selectNumber;
20
    this.props.decrement(Number(value));
21
  };
22
  incrementIfOdd = () => {
23
    const { value } = this.selectNumber;
24
    const { count } = this.props;
25
    if (count % 2 === 1) {
26
      this.props.increment(Number(value));
27
    }
28
  };
29
  incrementAsync = () => {
30
    const { value } = this.selectNumber;
31
    this.props.incrementAsync(Number(value));
32
  };
33
  render() {
34
    return (
35
      <div>
36
        <h2>当前结果为：{this.props.count}</h2>
37
        <div>
38
          <select ref={(c) => (this.selectNumber = c)}>
39
            <option value="1">1</option>
40
            <option value="2">2</option>
41
            <option value="3">3</option>
42
          </select>
43
          <button onClick={this.increment}>+</button>
44
          <button onClick={this.decrement}>-</button>
45
          <button onClick={this.incrementIfOdd}>当前结果为奇数时加</button>
46
          <button onClick={this.incrementAsync}>异步加</button>
47
        </div>
48
      </div>
49
    );
50
  }
51
}
52
​
53
export default connect((state) => ({ count: state }), {
54
  increment: createIncrementAction,
55
  decrement: createDecrementAction,
56
  incrementAsync: createIncrementAsyncAction,
57
})(Count);// 注意：这里使用的就是上面的UI组件