reduce&compose&applyMiddleware&redux-thunk

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）之类的。。