349989153 10 X 10
Last updated: 2018-04-10
349989153:~ Desktop$ node 阅读redux源码--applyMiddleware.js.js

> Post.tags
jsredux源码

> Post.prev
阅读redux源码--bindActionCreators.js

> Post.next
现金找零方式的总数(sicp)
阅读redux源码--applyMiddleware.js

applyMiddleware.js就是升级dispatch方法,使之更强大。


applyMiddleware.js

接收若干个函数,统称为...middlewares,返回一个函数a(代码里是匿名函数,我这里为了表达方便加个名字)。这个函数a接收参数createStore,返回一个Redux Store的对象。因为applyMiddleware.js是当作enhancer用在createStore里面的,所以返回的这个函数a,接收一个createStore为参数。

然后呢创建了一个store,声明一个dispatch函数,声明一个chain数组。创建middlewareAPI这个对象,它的getState就是store的getState,dispatch是一个函数。

然后遍历middlewares,对其中的每个middleware都用middlewareAPI执行一下,返回值都是接收一个参数的函数,返回值塞到chain里。举个简单的例子,比如chain = [b, c, d]

然后用compose把chain和store.dispatch组合起来,变成一系列变换,再赋给新的dispatch:

1
dispatch = b(c(d(store.dispatch)))

最后返回一个redux store,这个store除了dispatch之外都是原装的,和createStore.js返回的一样。dispatch则是经过middlewares的一系列变换后生成的dispatch。

总结

applyMiddleware的目的就是加强dispatch,让dispatch在原有的功能上,进行函数变换使之具有新的功能。

它接收若干个middleware作为参数。每个middleware能够接收到一个object作为参数,这个参数有getState和新的dispatch;然后返回一个只接收单个参数的函数。这个函数是要被compose使用的。

然后使用compose制造一个新的dispatch,新的dispatch是按照middlewares从右往左的顺序执行的。

middleware接收一个object作为参数,返回一个函数,这个函数接收一个next作为参数,返回一个函数,这个函数接收一个action作为参数。