redux里的compose是通过reduce来实现的
1.reduce
array.reduce(callback,initialData)
callback=(operate,date)=>{
// do something with operate &date
}
eg:
其中initialData作为初始传入值,callback中第一个参数为对数组的操作的累计值,第二个参数为数组内item
2.compose
在compose里的实现
源码:
其中reduceRight是从数组的尾部开始调用callback
compose(...funcs)(...args) 就会return一个对funcs数组进行reduce的结果,其中初始对象为last(...args)
eg:
compose(f, g, h)(...args) => f(g(h(...args))).
3.applyMiddleware
Middleware 可以让你包装 store 的 dispatch
方法来达到你想要的目的。同时, middleware 还拥有“可组合”这一关键特性。多个 middleware 可以被组合到一起使用,形成 middleware 链。其中,每个 middleware 都不需要关心链中它前后的 middleware 的任何信息。
源码:
chain为所有中间件添加getState和dispatch(action)
再compose把store.dispatch传入到chain中的方法,实现整个store在中间件内的dispatch
4.redux-thunk
redux-thunk 支持 dispatch function,以此让 action creator 控制反转。被 dispatch 的 function 会接收 dispatch
作为参数,并且可以异步调用它。这类的 function 就称为 thunk
它应用在applyMiddleWare中
首先chain先传了{getState,dispatch},
然后在compose{...chain}{store.dispatch}传入一个store.dispatch
这个时候假如action是function就把{getState,dispatch}传给function
如果action是对象,就store.dispatch(action)
action是函数有啥好处呢?
可以处理更加复杂的逻辑&操作,比如先log一下再dispatch(action)之类的。。