Redux的使用 + 中间件处理异步action+ redux持久化

一、关于Redux

redux是一个 js 的状态管理库，用于管理应用的全局状态。可以帮助开发者管理和同步应用中的数据状态，以实现组件间的数据共享和通信。
redux 遵循了一种单向数据流的架构模式，将整个应用的状态数据存储在一个全局的状态树store中，通过action和reducer来管理状态的变化。
redux的核心组成有：
（1）store：状态容器，包含了应用的所有状态，并提供了一些方法来访问和修改状态,通过一个store管理整个应用状态。
（2）action：是一个普通的 js 对象，每个action都有一个type字段，表示将要执行的动作，并可以携带一些额外的数据。
（3）reducer：状态变化的处理者，是一个纯函数，它接收当前的 state 和 action，返回一个新的state。

二、安装使用

1、安装

npm i redux redux-react -D

2、封装store

（1）目录结构

（2）【src/store/reducers/testReducer1.ts】文件代码

（3）【src/store/reducers/testReducer2.ts】文件代码

（4）【src/store/reducers/index.ts】文件代码，合并reducer

（4）【src/store/index.ts】文件代码，创建store

3、使用store

（1）【src/main.ts】文件中进行注册

（2）【testPage1.tsx】文件中进行展示并修改testReducer1的userName

testPage1页面效果

（3）【testPage2.tsx】文件中进行展示，展示testReducer1的userName

4、测试效果

（1）testPage1效果

testPage1页面点击 “点击修改用户名为：大白” 按钮，点击后testReducer1的userName就被修改为大白，然后点击 “跳转至testPage2页面”

（2）testPage2查看用户名是否被更新为大白，下图可看到用户名已经改变。

三、中间件处理异步action

action是一个普通的 js 对象，每个action都有一个type字段，表示将要执行的动作，并可以携带一些额外的数据
action不能是异步的。如果需要处理异步action，我们需要借助redux中间件来处理
常见处理异步action的中间件有：
1、redux-thunk 支持dispatch(函数)
2、redux-promise 支持dispatch(Promise)、dispatch({type:“”,payload:Promise})
3、redux-saga 支持异步和同步（推荐使用）
下面分别来使用一下这三个中间件。

1、redux-thunk

（1）安装

npm i redux-thunk -D

（2）使用

在创建store时，注册中间件。

【src/store/index.ts】文件代码

在testPage1页面测试使用

查看浏览器控制台dispatch的打印结果，从结果可看出redux-thunk中间件让dispatch支持函数。

项目中异步action比较多，可以封装一个公共的函数，进行统一管理
例如，新建一个文件【src/store/reducers/asyncAction.ts】

export function thunkAction(action) {
	return (diapatch) => {
		switch (action.type) {
			case "setUserName":
				setTimeout(() => {
					diapatch(action);
				}, 2000);
				break;
		}
	};
}

在执行diapatch时调用

	dispatch(
		thunkAction({
			type: "setUserName",
			payload: "大白",
		})
	);

2、redux-promise

（1）安装

npm i redux-promise -D

（2）使用

thunk-promise的dispatch两种使用方法：
1、是直接传入Promise对象。
2、是将Promise对象放入Action的payload字段中。

在创建store时，注册中间件。

【src/store/index.ts】文件代码

新建一个文件统一写Promise

【src/store/reducers/asyncAction.ts】

在testPage1页面测试使用

方式一：直接传入Promise对象。

方式二：将Promise对象放入Action的payload字段中

3、redux-saga（推荐）

（1）安装

npm i redux-saga -D

（2）使用

创建【src/store/redux/reducers/asyncAction.ts】文件，专门写异步操作的方法，方便统一管理saga中间件的异步action

创建【src/store/redux/reducers/sagas.ts】文件，集中写saga

在创建store时，注册中间件。

在testPage1页面测试使用

在sagas.ts文件中监听到这个reducer为异步，则会调用自定义封装的异步函数，如果是同步则会放行。

四、redux持久化

（1）安装插件

npm i redux-persist --D

（2）在创建store时，注册持久化。

（3）在【src/main.ts】文件，使用持久化

（4）查看效果