React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > Redux中间件

Redux中间件的使用方法教程

作者:绿胡子大叔

中间件就是一个函数,对store.dispatch方法进行了改造,在发出 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)
    }
  }
}

可以使用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

相关源码:

redux/src/createStore.ts

redux/src/applyMiddleware.ts

redux/src/compose.ts

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中间件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文