当前位置： 移动技术网 > IT编程>开发语言>JavaScript > redux源码学习笔记 - applyMiddleware

redux源码学习笔记 - applyMiddleware

2019年04月26日  | 移动技术网IT编程  | 我要评论

在创建store时，createstore(reducer, preloadedstate, enhancer)，除了reducer函数，初始状态，还可以传入enhancer。这个enhancer在createstore的源码中是这样使用的

    return enhancer(createstore)(reducer, preloadedstate)

它可以接受createstore方法并进行自定义改装，然后再使用改装后的方法创建仓库。

而redux官方提供的enhancer就只有applymiddleware。

applymiddleware(...middlewares)

applymiddleware的主要功能是改写createstore中的dispatch方法，并且可以将多个middleware组合到一起，形式链式的调用，前后互不影响。这样要求middleware必须遵循一定的格式。({ getstate, dispatch }) => next => action => {}

applymiddleware的实现

export default function applymiddleware(...middlewares) {
  // 返回一个enhancer函数，接受createstore作为参数（可以对照enhancer的调用方式来看）
  return createstore => (...args) => { // enhancer函数接受reducer, preloadedstate来创建仓库
    const store = createstore(...args)
    // 自定义dispatch函数，在构造middleware的时候，不允许调用dispatch
    let dispatch = () => {
      throw new error(
        `dispatching while constructing your middleware is not allowed. ` +
          `other middleware would not be applied to this dispatch.`
      )
    }

    const middlewareapi = {
      getstate: store.getstate, // store中的getstate函数，用于获取状态
      dispatch: (...args) => dispatch(...args) // 自定义的dispatch函数
    }
    // 传入到getstate，和dispatch到middleware中 生成 next => action => {} 格式的函数
    const chain = middlewares.map(middleware => middleware(middlewareapi))

    // 自定义的dispatch更新为 多个middleware的组合函数；传入store原本dispatch函数给组合函数（会在最后一个middle中作为next函数）
    dispatch = compose(...chain)(store.dispatch)

    // 返回store仓库，此时的dispatch函数已被改写，为多个middleware的组合函数
    return {
      ...store,
      dispatch
    }
  }
}

组合和链式调用

关键是要理解这里dispatch = compose(...chain)(store.dispatch),dispatch被改写为多个middleware的组合函数。

compose函数中关键的一句是return funcs.reduce((a, b) => (...args) => a(b(...args)))

a可以理解为next => action => {},而next可以理解为b(...args) 就是下一个middleware的 ation => {} 函数。所以实现了链式调用。a中做了自定义的操作，会调用b，b调用c···最后一个调用store.dispatch。

用两个middleware做例子来梳理改写后的dispatch(action)的调用过程。

自定义middleware

middleware必须遵循一定的格式。({ getstate, dispatch }) => next => action => {}

{getstate, dispatch}参数是在applymiddleware的源码中const chain = middlewares.map(middleware => middleware(middlewareapi))这一部分被传入的，store的getstate和改写后的dispatch。

next是下一个middleware或者store.dispatch，action是触发的动作

/*logger*/
export default ({dispatch,getstate}) => next => action => {
    // 做一些自定义的事情
    console.log('will dispatch ation',action);
    console.log('next in loggere',next);

    // 调用下一个middleware
    let returnvalue = next(action);

    console.log('state after dispatch',getstate());

    return returnvalue;
}
/*test*/
export default ({dispatch,getstate}) => next => action => {
        
    console.log('next in  test',next)

    return next(action);
}

使用applymiddleware

store = createstore(reducer,applymiddleware(logger,test))

触发action时，有如下打印

logger做完自定义操作后，调用下一个middleware（test）函数，test是最后一个middleware，它的next是store.dispatch，就触发了action。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网