reduce&compose&applyMiddleware&redux-thunk

xiaoxiao2021-02-28  117

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

转载请注明原文地址: https://www.6miu.com/read-56199.html

最新回复(0)