标签：bsp 方法 功能 实现 ogg div rest 汇总 port
在开发时，也许需要更多地包装dispatch以实现更加完善的功能。
比如包装 dispatch来打印日志，包装dispatch以支持Promise，各种包装需要密切配合。
之前两篇代码的汇总:
//包装dispatch来打印日志 const addLoggingToDispatch = (store) => { const rawDispatch = store.dispatch; if(!console.group){ return rawDispatch; } return (action) => { console.group(action.type); console.log(‘%c previous state‘, ‘color: gray‘, store.getState()); console.log(‘%c action‘, ‘color: blue‘, action); const returnValue = rawDispatch(action); console.log(‘%c previous state‘, ‘color: gray‘, store.getState()); console.log.group(action.type); return returnValue } } //dispatch支持传入promise对象 const addPromiseSupportToDispatch = (store) => { const rawDispatch = store.dispatch; return (action) => { if(typeof action.then === ‘function‘){ return action.then(rawDispatch); } return rawDispatch(action); } }
为了使这两种方式同时运作，可以写一个用来初始化sotre的函数，以丰富store.dispatch的功能。
const configureStore = () => { const store = createStore(App); if(process.env.NODE_ENV !== ‘production‘){ store.dispatch = addLoggingToDispatch(store); } store.dispatch = addPromiseSupportToDispatch(store); return store; }
这样便返回了一个包含有增强型dispatch的store，
仔细研究configureStore函数，我们发现addPromiseSupportToDispatch方法返回了一个符合正常用法的dispatch，
此时它支持dispatch参数是一个promise，它会等待Promise resolve后，利用rawDispatch再次进行action派发。
那么这个rawDispatch是最初、最原始的dispatch吗？在开发环境下，显然不是。因为执行sotre.dispatch = addPromiseSupportToDispatch(store)之前，
已经执行了store.dispatch = addLoggingToDispatch(store)。
换名话说，在执行addPromiseSupportToDispatch时，store.dispatch是上一个包装版本的sotre.dispatch。
明白了这层关系，我们就会想到rawDispatch这个全名不十分准确，它本意是最原始的store.dispatch , 但是在代码执行
时，每一个中间件所获得的store.dispatch都已经被改造，我们将其命名为next。
前面的例子改造之后：
const addLoggingToDispatch = (store) => { const next = store.dispatch; if(!console.group){ return next } return (action) => { //... const resultValue = next(action); //... return resultValue; } } const addPromiseSupportToDispatch = (store) => { const next = store.dispatch; return (action) => { if(typeof action.then === ‘function‘){ return action.then(next) } return next(action); } }
为了避免上面这样零散地修改公共的api接口，我们可以将这种包装过程收敛 - 声明一个数组，即中间件数组。
它的每一项都是一个中间件，然后统一根据中间件来增强dispatch。
const configureStore = () => { const store = createStore(App); const middleWare = []; if(process.env.NODE_ENV !== ‘production‘){ middleWare.push(addLoggingToDispatch); } middleWare.push(addPromiseSupportToDispatch); wrapDispatchWithMiddlewares(store, middlewares); return store; } 以上代码中，并不直接执行addLoggingToDispatch和addPromiseToDispatch，而 是将其push到middlewares数组，然后统一执行。这里说的统一执行就是指代码中的wrapDispatchWithMiddleWares(store, middlewares); const wrapDispatchWithMiddlewares = (store, middlewares) => { middlewares.forEach(middleware => { store.dispatch = middleware(store)(store.dispatch); }) }
标签：bsp 方法 功能 实现 ogg div rest 汇总 port
原文地址：https://www.cnblogs.com/hellolol/p/11379340.html
