Redux中间件的使用方法教程
作者：绿胡子大叔
中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能，要理解中间件，关键点是要知道，这个中间件是连接哪些部分的软件，它在中间做了什么事，提供了什么服务
前言
- 在Express框架中，middleware是指可以被嵌入在框架接收请求到产生响应过程中的代码。
- 在Redux中，middleware提供的是位于action被发起后，到达reducer之前的扩展点
Q: 中间件的代码什么时候被调用？
A: 在 action 被发起之后，到达 reducer 之前。
下面用流程图来解释middleware：
应用
如何创建一个中间件
首先，Redux中间件的形式为一个柯里化的函数。
function exampleMiddleware(storeAPI) {
return function wrapDispatch(next) {
return function handleAction(action) {
// 在这里做你想做的事情，做完后，通过返回next(action)向下一个middleware传递action
return next(action)
}
}
}
- 最外层的
exampleMiddleware函数将会被applyMiddleware直接调用，并传入一个包含dispatch()和getState()的对象作为参数 - 调用
storeAPI.dispatch(action)时，它会将操作发送到中间件链的开头，重新执行所有的中间件 - 中间层的
wrapDispatch函数接收一个名为next的函数作为其参数。这个函数实际上是中间件链中的下一个中间件。如果这个中间件是序列中的最后一个，那么next函数实际上是原始的store.dispatch函数。调用next(action)会将action传递给中间件链中的下一个中间件 - 最后，
handleAction函数接收当前action作为其参数，并在每次dispatch(action)时调用
可以使用ES6的箭头函数简化此函数：
const exampleMiddleware = store => next => action => {
return next(action)
}
如何应用中间件
Redux 中间件实际上是在 Redux 内置的一个非常特殊的存储增强器之上实现的，称为 applyMiddleware。
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducer'
import { print1, print2, print3 } from './exampleAddons/middleware'
const middlewareEnhancer = applyMiddleware(print1, print2, print3)
const store = createStore(rootReducer, middlewareEnhancer)
export default store
原理
Redux 如何装载Middleware
相关源码：
applyMiddleware和Compose函数的执行过程：
// 省略了中间代码并去除typescript类型，并将Compose和applyMiddleware函数放在一起便于展示
function compose(...funcs) {
// 没有传入middleware，直接返回
if (funcs.length === 0) {
return (arg) => arg
}
// 传入一个middleware，无需构造，直接返回
if (funcs.length === 1) {
return funcs[0]
}
// 进行函数柯里化返回一个形如：fn1(fn2(fn3(store.dispatch))) 的新dispatch函数
return funcs.reduce(
(a, b) =>
(...args: any) =>
a(b(...args))
)
}
function applyMiddleware(...middlewares){
return (createStore) => (reducer, preloadedState) => {
// createStore中检测到由applyMiddleware函数生成的enhancer时，将createStore、reducer、initialState传入，在函数中创建一个临时的store
const store = createStore(reducer, preloadedState)
// 创建一个临时的dispatch函数，此函数抛出异常，用于防止处理传入的middlewares时提前调用dispatch
let dispatch = () => {
throw new Error(
'Dispatching while constructing your middleware is not allowed. ' +
'Other middleware would not be applied to this dispatch.'
)
}
// 给middleware分发store
const middlewareAPI = {
getState: store.getState,
dispatch: (action, ...args) => dispatch(action, ...args)
}
// 让每个middleware带着middlewareAPI这个参数执行一遍，然后获得带着相同的store的middlewares
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 将所有chain中的函数利用Compose函数组装成一个新的dispatch函数
// 如：dispatch=fn1(fn2(fn3(store.dispatch)))
dispatch = compose(...chain)(store.dispatch)
// 将生成的dispatch函数整合到刚才生成的store中并返回
return {
...store,
dispatch
}
}
}当我们调用store.dispatch(action)时，我们实际上是在调用管道中的第一个中间件。然后，该中间件可以在收到action时做任何它想做的事情，并在做完该事情后将action传给下一个中间件继续处理，直到所有中间件处理完成，调用原始的dispatch函数将action提交给reducer处理引发state变化
到此这篇关于Redux中间件的使用方法教程的文章就介绍到这了,更多相关Redux中间件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！