Redux源码聊聊

1.createStore(reducer,preloadedState,enhance)

参数:  
    reducer:给出action和当前state,返回下一个新的state;

    initState:初始化state, 如果reducer是使用combineReducer提供的方法,
                      那么state一定是和reducer的key值一样的结构对象;

    enhancer:必须是fun,不然会报错,高阶函数,返回强化过的高阶函数,
                        就是将creatStore的能力增强 。
返回:
    store:可供读写并且监控改变的store,当然写只能通过dispatch(state, action)了


注册了4个方法: 
    getState()
        获得store中当前的状态。

    dispath(action)
        分发一个action,并返回这个 action,这是唯一能改变 store 中数据的方式。

    subscrible(listener)
        注册一个监听者,他在 store 发生变化时被调用。

    replaceReducer(nextReducer)
        更新当前 store 里的reducer

createStore就是一个大的闭包,就是一个函数里面有别的函数的话,那么在外部调用里面的函数,那么在外部函数的state,reducer,listener都不会被销毁,就一直存在,里面的函数可以对公共方法变量进行读写。。。我可真是一个小机灵鬼~~~

  源码大概200行,很多注释,我翻译一下

校验参数+公共方法变量赋值
获得state
替换reducer
监听器
返回对象


2.combineReducers(reducers):把reducer函数检查过滤,合成一个新的函数,dispatch的时候,挨个执行每个reducer

    接收reducers对象(key-value),以reducers的name作为key。

初始化

    过滤掉value是undefined的reducers,生成一个新的reducers对象。finalReducers

过滤无效的reducers

    通过assertReducerShape检查错误的reducers,检查形式是:
        ①reducer(undefined, { type: ActionTypes.INIT }),先检验initialState返回的是不是undefined;         ②reducer(undefined, { type }),检验随机的一个type是否会返回undefined

reducer检查

返回一个函数combination,这个方法才是最终的reducer,因此dispatch的时候,是调用了这个函数。该方法接受state和action两个参数,每次都会逐个调用每一个小的reducer,返回一个单独的{key-value}对象state,key与reducer的key保持一致。

参数
检验reducer
核心代码

    这点代码的意思是,每个reducer(prevState,action)返回的就是新的state[key],最终每个reducer给state一个key,组成一个完整的state。

重点:
    ①state只有一个,就是createStore创建出来的state,state的属性有几个是根据combinReducer有几个reducer决定的;
    ②执行上面方法的时候,穿进去的state是对应当前reducer的state,比如state.todos / state.visibility;

附上参考文档:https://blog.csdn.net/bgk083/article/details/50867365

3.applyMiddleware

    创建一个store强化器,能提供中间件去dispatch action。

    看代码就是。。。先创建createStore,再循环参数,将state和dispatch作为参数传入,依次调用中间件,将上次的调用返回的store传入下一个中间件。

redux执行同步的数据修改是没问题的,但是异步的数据修改,需要redux-thunk中间件,就是action发出后过一段时间再执行reducer。

中间件会被放在applyMiddleware()中,在applyMiddleware方法中,遍历所有的middleware,将state和dispatch作为参数传入,依次执行,最后才dispatch action,这就实现了,在action和reducer之间增加了功能,可以做异步处理的地方。

4.bindActionCreators

bindActionCreators唯一的用处就是在子组件未察觉redux的情况下,将dispatch传递给子组件。

5.compose

    深度执行函数,从右到左,依次执行。applyMiddleware 机制的核心在于组合 compose,将不同的 middlewares 一层一层包裹到原生的 dispatch 之上,

compose(a, b, c)

c( b( a(...arguments) ) )

6.react-redux

redux实现了状态数据的集中管理,dispatch时候,redux里面的数据确实变了,但是react并没有变化,所以还要监听state变化,然后setState,那么就是左右应用store的子组件都要监听state的变化,麻烦!!!

react-redux就是为此而生,它提供Provider和connect。顶层组件必须包裹在Provider里面,并且store必须作为参数放在Provider里面。

6.1 Provider

    提供3中方法:
        getChildContext:外部store对象放入context中,使子孙组件能够直接访问
        render:渲染子级元素,使整个应用成为provider的子组件
        constructor:初始化获得props中的store

<Provider store={store}>
    <App />
</Provider>
provider会将由props传入的store,渲染到自己的context上,再由connect取出context的内容,渲染到子组件上

6.2 connect

    connect是高阶组件,接受参数,吐出一个高级的组件,connect接受两个方法一个组件。
    connect(mapStateToProps, mapDispatchToProps)(component)。

    connect会取出context里的store,然后把store里面的数据映射到当前组件的props,使得组件只要在props使用数据和方法就可以,不用再去context里面取值+监听变化+重新渲染视图。

const mapStateToProps  (state)  {
    return {
        data1: state.data1,
        data2: state.data2,
        ...
    }
}
这里面的参数state,是在connect函数里面调用mapStateToProps的时候传进去的,所以不会报state未定义的错。

const mapDispatchToProps  (state)  {   
    return {       
        changeColor: (color) => {
            dispatch({ type: 'CHANGE_COLOR', themeColor: color })
        } ,       
        changeText: (text) => {           
            dispatch({ type: 'CHANGE_TEXT', themeText: text })       
         }       
        ...    
    }
 }

7.redux-trunk    

    可以接受一个返回函数的action creator。如果这个action creator 返回的是一个函数,就执行它,如果不是,就按照原来的next(action)执行

redux-thunk

8.柯里化curring

    一个函数可以接受很多参数,柯里化函数,就是只接受一个参数,利用返回的函数,来处理剩下的参数

    fn(a, b, c, d) => fn(a)(b)(c)(d)
    fn(a, b, c, d) => fn(a, b)(c)(d)
    fn(a, b, c, d) => fn(a)(b, c, d)
    fn(a, b, c, d) => fn(a)(b)(c)(d)()
    fn(a, b, c, d) => fn(a);fn(b);fn(c);fn(d)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • 学习必备要点: 首先弄明白,Redux在使用React开发应用时,起到什么作用——状态集中管理 弄清楚Redux是...
    贺贺v5阅读 8,877评论 9 58
  • 使用redux+react已有一段时间,刚开始使用并未深入了解其源码,最近静下心细读源码,感触颇深~ 本文主要包含...
    字节跳动技术团队阅读 1,456评论 0 5
  • export const ActionTypes = {INIT:'@@redux/INIT'} // 生成一个s...
    jiandan5850阅读 477评论 0 0
  • 一、什么情况需要redux? 1、用户的使用方式复杂 2、不同身份的用户有不同的使用方式(比如普通用户和管...
    初晨的笔记阅读 2,013评论 0 11
  • 前言 本文 有配套视频,可以酌情观看。 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论。 文中所有内...
    珍此良辰阅读 11,892评论 23 111