React全家桶核心知识点(三) - redux

, ,

一、redux是什么

学习文档

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

redux是什么

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

什么情况下需要使用redux

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

redux工作流程

二、redux的三个核心概念

action

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

reducer

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

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时, 自动调用

三、redux的核心API

createstore()

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

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)

applyMiddleware()

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

combineReducers()

作用：合并多个reducer函数

四、react-reudx

理解

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

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

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

API

1、Provider：让所有组件都可以得到state数据

1
2
3
<Provider store={store}>
  <App />
</Provider>

2、connect：用于包装 UI 组件生成容器组件

1
2
3
4
5
import { connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)

3、mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

1
2
3
4
5
const mapStateToprops = function (state) {
  return {
    value: state
  }
}

4、mapDispatchToProps：将分发action的函数转换为UI组件的标签属性

五、纯函数和高阶函数

纯函数

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

高阶函数

  1. 理解: 一类特别的函数
    1)情况1: 参数是函数
    2)情况2: 返回是函数
  2. 常见的高阶函数:
    1)定时器设置函数
    2)数组的forEach()/map()/filter()/reduce()/find()/bind()
    3)promise
    4)react-redux中的connect函数
  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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
1.redux精简版
		(1).去除Count组件自身的状态
		(2).src下建立:
						-redux
							-store.js
							-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自动触发的，
									传递的preState是undefined,
									传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

		(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
				备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。


2.redux完整版
		新增文件：
			1.count_action.js 专门用于创建action对象
			2.constant.js 放置容易写错的type值

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

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

5.react-redux优化
			(1).容器组件和UI组件整合一个文件
			(2).无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。
			(3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
			(4).mapDispatchToProps也可以简单的写成一个对象
			(5).一个组件要和redux“打交道”要经过哪几步？
							(1).定义好UI组件---不暴露
							(2).引入connect生成一个容器组件，并暴露，写法如下：
									connect(
										state => ({key:value}), //映射状态
										{key:xxxxxAction} //映射操作状态的方法
									)(UI组件)
							(4).在UI组件中通过this.props.xxxxxxx读取和操作状态

6.react-redux数据共享版
			(1).定义一个Pserson组件，和Count组件通过redux共享数据。
			(2).为Person组件编写：reducer、action，配置constant常量。
			(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，
					合并后的总状态是一个对象！！！
			(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

7.react-redux开发者工具的使用
			(1).yarn add redux-devtools-extension
			(2).store中进行配置
					import {composeWithDevTools} from 'redux-devtools-extension'
					const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

8.react-redux最终版
			(1).所有变量名字要规范，尽量触发对象的简写形式。
			(2).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer