砖头搬完了,找点乐趣,记得之前看vuex的源码.. 挺有意思,没有记录..现在忘光光.. 这一年一直写react,就玩玩redux 源码吧...
3.72版本
我玩弄的是3.72的版本. 目录挺清晰的 一个一个来...皮鞭蜡烛准备好...
readme
按照国际惯例,先看看readme, 知道你们不想看, 本屌微微一看,略表心意,大概将了redux'挺屌,run in different environments (client, server, and native) 哪都能用. 下面还给了例子 还有各种文档废话..下一个 过!
compose
先弄第一个compose吧, 挑软的捏...骚呢..兄弟..compose 真是短.. compose就是处理redux中间件的.到底是什么处理的,其实作者在注释中的return已经写明了 =》 (...args) => f(g(h(...args))) 使用reduce 把func 从右到左包裹起来以此执行.然后就没有了... so easy ..我以前猜测是用数组遍历以此执行,果然是我太low
下一个 applyMiddleware
applyMiddleware
文档自己对applyMiddleware的解释是:创建一个能够执行中间件并且dispatch store 的增强型store. 在执行action 之前去执行一个异步操作或者logger一下.其实就是 (合并中间件) ,并 做了两件事情:
第一: 给每个middleware 传入getState 和 store.dispatch方法.
第二: 这时候就用到上面将的compose了,对这些middleware依次包裹起来,并且传入state 方法.
下一个,combineReducers这个没啥说的,合并reducer
reducer
大家随便看看 ...继续继续 昨天晚上没有弄完,去健身去了,身体一日不如一日啊...下面是createStore
createStore
在createStore 中有两个return .
第一个return 是有 中间件 的情况下 直接使用applymiddleware(enhancer)处理createStore 然后传入 reducer 和 state. 导致 在dipatch 之前都会触发 中间件.
第二个 return 是在没有中间件的情况下返回一串方法,下面一个一个说:
1. observable redux 里面的订阅发布.这个用的比较少,调用他,会返回一个$$observable对象和subscribe方法给你使用.
2.replaceReducer,这个用的也挺少,替换reducer 然后初始化一下.
replaceReducer
3.getState,直接返回当前的state.
4.subscribe,订阅监听函数.
subscribe
做了三件
* 判断 前后 listener 是否相同. 这个地方不太明白为啥要做这一步,其实不做也可以吧...其实不可以..这段我看了很长时间才明白,这段要结合dispatch方法一起看, 因为每次dispatch 的时候会遍历一遍listeners,这一步可以保证拿到的是当前的listener.
* push一个listener
* 返回一个取消订阅
5.dispatch 函数
dipatch
做了二件事情: 1. 使用reducer 触发action 2. 执行所有的listener 最后返回action.
至此 redux 全部的源码已经过了一遍了.最后总结一下redux完整的流程.
网友评论