reduce&compose&applyMiddleware&redux-thunk
2017-06-07 19:37
288 查看
redux里的compose是通过reduce来实现的
array.reduce(callback,initialData)
callback=(operate,date)=>{
// do something with operate &date
}
eg:
展开原码
其中initialData作为初始传入值,callback中第一个参数为对数组的操作的累计值,第二个参数为数组内item
在compose里的实现
源码:
展开原码
其中reduceRight是从数组的尾部开始调用callback
compose(...funcs)(...args) 就会return一个对funcs数组进行reduce的结果,其中初始对象为last(...args)
eg:
Middleware 可以让你包装 store 的
middleware 链。其中,每个 middleware 都不需要关心链中它前后的 middleware 的任何信息。
源码:
展开原码
chain为所有中间件添加getState和dispatch(action)
再compose把store.dispatch传入到chain中的方法,实现整个store在中间件内的dispatch
redux-thunk 支持 dispatch function,以此让 action creator 控制反转。被 dispatch 的 function 会接收
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)之类的。。
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)之类的。。
相关文章推荐
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
- [Redux-Observable && Unit Testing] Mocking an ajax request when testing epics
- [翻译&摘抄] 在大型应用中使用 Redux 的五个技巧
- React&Redux
- 解读ASP.NET 5 & MVC6系列(6):Middleware详解
- JavaScript设计模式与开发实践(二)——apply&&call
- 'Could not apply the stored configuration for the monitor'解决方法-fedora19
- python的几个内建函数:apply,filter,map,reduce
- koa/redux middleware系统解析
- Scalaz(27)- Inference & Unapply :类型的推导和匹配
- 解读ASP.NET 5 & MVC6系列(6):Middleware详解
- filter&map&reduce 标签: python
- [译文&摘抄]在 React & Redux 中使用 AJAX 轮询
- RxJava操作符 reduce & scan
- Redux源码分析之compose
- (FFOS Gecko & Gaia) OTA - 关键的apply
- [Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)
- Debain 错误 "Could not apply changes! Fix broken packages first."