文章目录
一、关于Redux二、安装使用1、安装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（3）【testPage2.tsx】文件中进行展示，展示testReducer1的userName
4、测试效果（1）testPage1效果（2）testPage2查看用户名是否被更新为大白，下图可看到用户名已经改变。
三、中间件处理异步action1、redux-thunk（1）安装（2）使用在创建store时，注册中间件。在testPage1页面测试使用
2、redux-promise（1）安装（2）使用在创建store时，注册中间件。新建一个文件统一写Promise在testPage1页面测试使用方式一：直接传入Promise对象。方式二：将Promise对象放入Action的payload字段中
3、redux-saga（推荐）（1）安装（2）使用创建【src/store/redux/reducers/asyncAction.ts】文件，专门写异步操作的方法，方便统一管理saga中间件的异步action创建【src/store/redux/reducers/sagas.ts】文件，集中写saga在创建store时，注册中间件。在testPage1页面测试使用
四、redux持久化（1）安装插件（2）在创建store时，注册持久化。（3）在【src/main.ts】文件，使用持久化（4）查看效果
一、关于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）查看效果
好文阅读
发表评论