学习React之Redux（比较粗糙，用于自己理解）

第1章 redux

1.1 redux理解

1.1.1 学习文档

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

1.2.2 redux

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

1.2.3 使用redux的场景

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

1.2.4 redux工作原理

redux工作原理

把组件里要做的事情告知ActionCreators => 告知store,事情类型和数据
dispatch分发action 给 Store（c位）； store交给reducer去加工。reducer才是真正辛苦的人，加工完了，返回store
reducer得有之前得状态，是第二次。所以reducer有两件事情，初始化状态和加工状态
生活中的案例： react Components就相当于客人，点餐后给服务员，action Creator就相当于服务员，然后给老板（store）将这些点菜得给后厨（reducers）;做完以后返回，老板给客人吃

1.2 redux的三个核心概念

1.2.1 action

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

1.2.2 reducer

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

1.2.3 store

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

1.3 一套redux

constants.js

/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

action.js

/* 
	该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'

//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createIncrementAction(data))
		},time)
	}
}

reducer.js

/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {INCREMENT,DECREMENT} from './constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
	// console.log(preState);
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState
	}
}

store.js

/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))

1.3 异步action

yarn add redux-thunk，并配置在store中
创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
异步任务有结果后，分发一个同步的action去真正操作数据。
备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

1.4 react-redux的使用

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

1.4.1 编码

import React, { Component } from 'react'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/count_action'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

//定义UI组件
class Count extends Component {

	state = {carName:'奔驰c63'}

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.jia(value*1)
	}
	//减法
	decrement = ()=>{
		const {value} = this.selectNumber
		this.props.jian(value*1)
	}
	//奇数再加
	incrementIfOdd = ()=>{
		const {value} = this.selectNumber
		if(this.props.count % 2 !== 0){
			this.props.jia(value*1)
		}
	}
	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.jiaAsync(value*1,500)
	}
	
	render() {
		//console.log('UI组件接收到的props是',this.props);
		return (
			<div>
				<h1>当前求和为：{this.props.count}</h1>
				<select ref={c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={this.increment}>+</button>&nbsp;
				<button onClick={this.decrement}>-</button>&nbsp;
				<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}

//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({count:state}),

	//mapDispatchToProps的一般写法
	/* dispatch => ({
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}) */

	//mapDispatchToProps的简写
	{
		jia:createIncrementAction,
		jian:createDecrementAction,
		jiaAsync:createIncrementAsyncAction,
	}
)(Count)

1.5 共享redux

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

1.6 react-redux开发者工具的使用

yarn add redux-devtools-extension
npm install --save-dev redux-devtools-extension
store中进行配置

import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

1.7 provider的使用

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

<Provider store={store}>
  <App />
</Provider>

connect : 包装UI组件生成容器组件

import { connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)

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

const mapStateToprops = function (state) {
  return {
    value: state
  }
}

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

1.8 纯函数和高阶函数

1.8.1 纯函数

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

1.8.2 高阶函数

理解: 一类特别的函数
1. 情况1: 参数是函数
2. 情况2: 返回是函数
常见的高阶函数
1. 定时器设置函数
2. 数组的forEach()/map()/filter()/reduce()/find()/bind()
3. promise
4. react-redux中的connect函数
作用: 能实现更加动态, 更加可扩展的功能

原文链接：https://blog.csdn.net/weixin_42991716/article/details/116431230