Redux有什么用?做了什么?

1.为什么用Redux?

    因为对于react来说,同级组件之间的通信尤为麻烦,或者是非常麻烦了,所以我们把所有需要多个组件使用的state拿出来,整合到顶部容器,进行分发。

2.react-router-redux

    这个包里有Provider、connect。

    就比如有一个大盒子(顶层容器Provider),里面有很多小盒子(组件Component),小盒子之间不能通信啊,每个盒子都有一个壳子,state穿不过去啊,于是就有connect来进行连接state和Component。

    Provider作为顶层容器接受store作为参数,进行state分发,在这里,state并不是清晰的设置一个对象,所有的共享数据都在里面,而是由多个reducer组成,每个reducer有一个小的state,多个小的state就组成了一个大的state。Provider在所有Router的最外层。

    connect存在于每个需要共享数据的组件里,connect方法接受两个函数:

    mapStateToProps:mapStateToProps接收state和当前组件的props作为参数,mapStateToProps会在state里面取出当前组件需要的数据,映射到当前组件的props上,这就实现了顶层数据分发到组件。(这个函数是自己定义的,名字不做严格要求,实现state到props映射的功能就好了)


mapStateTpProps方法

    mapDispatchToProps:它接收dispatch作为参数,将当前组件会用到的dispatch(action)映射到当前组件的事件回调函数fun上,这里讲action换个名字注入到props里面,然后可以在组件内部调用,直接dispatch(action)就好了。


mapDispatchToProps方法

    在这里解释一下bindActionCreators,这个东西是把当前组件的action传到它的子组件上的一个方法,在子组件标签上展开就好了。具体我也没用过,用到了再来补充。

connect方法

    上面的图片中,将两个方法直接传入connect方法中,封装的connect方法会把两个函数需要的参数注入,从而实现state和dispatch的映射。

    connect方法会把dispatch函数注入到当前组件的props里面,真的,原来我都不知道dispatch从哪里引进来的。用了connect方法之后,就可以{ dispatch } = this.props;就是这样的!

3.Action

    action是一个对象,有一个必要的参数type,剩下的参数key和value自定义,但是因为reducer是纯函数,所以通常的ajax请求都是在action完成的,我看最近一个项目,是在view层dispatch(action1),在action1里dispatch(action2)。上面的action1里面存在数据的请求,将请求回来的数据给action2做参数,action2是一个标准的action,因为它有type。可以触发reducer。

4.reducer

    组件中触发事件,action只是一个对象而已,只有dispatch(action)才能触发reducer去修改state,那么。。。dispatch(action)之后,是怎么找到相应的reducer的?咋找到的?

    看了一下源码,dispatch函数在createStore方法里面,会用到所有的reducer,所以我估计是把所有的reducer执行一遍。。。不匹配actionType的reducer就把当前的state完整不变的返回,符合的就生成一个新的state返回作为当前的state。嗯,,就是这样的。。。

    然后Reducer会接受当前的state和传入的actionType判断处理state。reducer是纯函数,一样的输入必须要得到一样的输出。reducer不能修改当前的state,必须复制一份,修改这个新的,然后返回新的对象作为当前的state。

state拷贝

    reducer这里有个辅助函数,将所有的reducer整合到一个大的reducer里,传给createStore做参数。

combineReducers

    会把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。

5.state

    这个state很是神奇啊,每次变动state的时候都会生成一个新的state,所以内存中就会有很多不同时刻的state,

6.因为最近刚看,有些细节说的可能不太准确,我写这个就是方便我理解而已。

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

推荐阅读更多精彩内容