文章目录
一、Redux中间件介绍
1、什么是Redux中间件
redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。
通俗来说，redux中间件就是对dispatch的功能做了扩展。
先来看一下传统的redux执行流程：
2、使用redux中间件
(1) redux-thunk(redux异步管理中间件)：thunk是一个很常用的redux中间件，应用它之后，我们可以dispatch一个方法，而不仅限于一个纯的action对象。
实现原理：
- 创建一个thunk中间件函数，它接受store作为参数，并返回一个函数，即thunk函数。
- 在Redux中间件链中使用thunk中间件函数。
- 当dispatch一个action时，Redux会检查action的类型是不是函数。如果是函数，则调用该函数，并将store的dispatch和getState方法作为参数传入。
- 在thunk函数中，可以执行异步操作，例如发起网络请求或者定时器操作。
- 异步操作完成后，可以调用store的dispatch方法来分发一个新的action，或者调用store的getState方法来获取当前的状态。
- Redux会将新的action传递给其他中间件或者reducer进行处理。
(2) redux-promise(redux异步管理中间件)： Promise 则更适合于输入输出操作，比较fetch函数返回的结果就是一个Promise对象，
它的实现原理如下：
- 创建一个中间件函数，接收store作为参数。
- 返回一个新的函数，接收next作为参数。
- 返回一个新的函数，接收action作为参数。
- 判断action的类型，如果action的payload是一个Promise对象，则等待Promise对象的结果，并将结果作为新的payload派发一个新的action。
- 将新的action传递给next函数，继续执行后续的中间件或者Redux的dispatch函数。
- 如果action的payload不是一个Promise对象，则直接将action传递给next函数。
(3) redux-saga(redux异步管理中间件)：redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。
redux-saga的实现原理如下：
- 创建saga middleware：通过调用redux-saga提供的createSagaMiddleware函数创建一个saga middleware。
- 启动saga middleware：在应用程序的主入口文件中，通过调用sagaMiddleware.run(rootSaga)启动saga middleware。rootSaga是一个Generator函数，它包含了所有的saga逻辑。
- 监听action：saga middleware会通过redux的store.dispatch方法来接收action。当一个action被dispatch时，saga middleware会检查是否有与该action相关的saga逻辑。
- 执行saga逻辑：当一个与action相关的saga逻辑被触发时，saga middleware会创建一个新的Generator实例来执行该saga逻辑。saga逻辑中的每一行代码都是一个yield表达式，用于控制异步操作的流程。
- 处理异步操作：当遇到一个yield表达式时，saga middleware会暂停当前的Generator实例，并执行yield表达式后面的异步操作。异步操作可以是一个Promise、一个回调函数、一个定时器等。
- 发起新的action：当异步操作完成时，saga middleware会再次通过redux的store.dispatch方法来发起一个新的action，这个新的action会被传递给reducer进行状态更新。
- 恢复Generator实例：当一个新的action被dispatch时，saga middleware会恢复之前暂停的Generator实例，并将新的action作为yield表达式的返回值。Generator实例会继续执行，直到遇到下一个yield表达式。
- 监听取消action：saga middleware还可以监听取消action，当一个取消action被dispatch时，saga middleware会取消正在执行的Generator实例，并清理相关的资源。