文章目录
- 一、Redux中间件介绍
- 1、什么是Redux中间件
- 2、使用redux中间件
一、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实例,并清理相关的资源。