Redux有什么用奔滑?做了什么艾岂?

1.為什么用Redux?

? ? 因?yàn)閷?duì)于react來(lái)說(shuō),同級(jí)組件之間的通信尤為麻煩朋其,或者是非常麻煩了王浴,所以我們把所有需要多個(gè)組件使用的state拿出來(lái),整合到頂部容器令宿,進(jìn)行分發(fā)叼耙。

2.react-router-redux

? ? 這個(gè)包里有Provider、connect粒没。

????就比如有一個(gè)大盒子(頂層容器Provider)筛婉,里面有很多小盒子(組件Component),小盒子之間不能通信啊癞松,每個(gè)盒子都有一個(gè)殼子爽撒,state穿不過(guò)去啊,于是就有connect來(lái)進(jìn)行連接state和Component响蓉。

? ? Provider作為頂層容器接受store作為參數(shù)硕勿,進(jìn)行state分發(fā),在這里枫甲,state并不是清晰的設(shè)置一個(gè)對(duì)象源武,所有的共享數(shù)據(jù)都在里面,而是由多個(gè)reducer組成,每個(gè)reducer有一個(gè)小的state,多個(gè)小的state就組成了一個(gè)大的state育八。Provider在所有Router的最外層叠荠。

? ? connect存在于每個(gè)需要共享數(shù)據(jù)的組件里云挟,connect方法接受兩個(gè)函數(shù):

????mapStateToProps:mapStateToProps接收state和當(dāng)前組件的props作為參數(shù),mapStateToProps會(huì)在state里面取出當(dāng)前組件需要的數(shù)據(jù),映射到當(dāng)前組件的props上,這就實(shí)現(xiàn)了頂層數(shù)據(jù)分發(fā)到組件渣淤。(這個(gè)函數(shù)是自己定義的,名字不做嚴(yán)格要求吉嫩,實(shí)現(xiàn)state到props映射的功能就好了)


mapStateTpProps方法

????mapDispatchToProps:它接收dispatch作為參數(shù)价认,將當(dāng)前組件會(huì)用到的dispatch(action)映射到當(dāng)前組件的事件回調(diào)函數(shù)fun上,這里講action換個(gè)名字注入到props里面自娩,然后可以在組件內(nèi)部調(diào)用用踩,直接dispatch(action)就好了。


mapDispatchToProps方法

? ? 在這里解釋一下bindActionCreators,這個(gè)東西是把當(dāng)前組件的action傳到它的子組件上的一個(gè)方法捶箱,在子組件標(biāo)簽上展開(kāi)就好了。具體我也沒(méi)用過(guò)动漾,用到了再來(lái)補(bǔ)充丁屎。

connect方法

????上面的圖片中,將兩個(gè)方法直接傳入connect方法中旱眯,封裝的connect方法會(huì)把兩個(gè)函數(shù)需要的參數(shù)注入晨川,從而實(shí)現(xiàn)state和dispatch的映射。

? ? connect方法會(huì)把dispatch函數(shù)注入到當(dāng)前組件的props里面删豺,真的共虑,原來(lái)我都不知道dispatch從哪里引進(jìn)來(lái)的。用了connect方法之后呀页,就可以{ dispatch } = this.props妈拌;就是這樣的!

3.Action

? ? action是一個(gè)對(duì)象蓬蝶,有一個(gè)必要的參數(shù)type尘分,剩下的參數(shù)key和value自定義,但是因?yàn)閞educer是純函數(shù)丸氛,所以通常的ajax請(qǐng)求都是在action完成的培愁,我看最近一個(gè)項(xiàng)目,是在view層dispatch(action1)缓窜,在action1里dispatch(action2)定续。上面的action1里面存在數(shù)據(jù)的請(qǐng)求,將請(qǐng)求回來(lái)的數(shù)據(jù)給action2做參數(shù)禾锤,action2是一個(gè)標(biāo)準(zhǔn)的action私股,因?yàn)樗衪ype∈敝祝可以觸發(fā)reducer庇茫。

4.reducer

????組件中觸發(fā)事件,action只是一個(gè)對(duì)象而已螃成,只有dispatch(action)才能觸發(fā)reducer去修改state旦签,那么。寸宏。宁炫。dispatch(action)之后,是怎么找到相應(yīng)的reducer的氮凝?咋找到的羔巢?

? ? 看了一下源碼,dispatch函數(shù)在createStore方法里面,會(huì)用到所有的reducer竿秆,所以我估計(jì)是把所有的reducer執(zhí)行一遍启摄。。幽钢。不匹配actionType的reducer就把當(dāng)前的state完整不變的返回歉备,符合的就生成一個(gè)新的state返回作為當(dāng)前的state。嗯匪燕,蕾羊,就是這樣的。帽驯。龟再。

? ? 然后Reducer會(huì)接受當(dāng)前的state和傳入的actionType判斷處理state。reducer是純函數(shù)尼变,一樣的輸入必須要得到一樣的輸出利凑。reducer不能修改當(dāng)前的state,必須復(fù)制一份嫌术,修改這個(gè)新的截碴,然后返回新的對(duì)象作為當(dāng)前的state。

state拷貝

? ? reducer這里有個(gè)輔助函數(shù)蛉威,將所有的reducer整合到一個(gè)大的reducer里日丹,傳給createStore做參數(shù)。

combineReducers

????會(huì)把一個(gè)由多個(gè)不同 reducer 函數(shù)作為 value 的 object蚯嫌,合并成一個(gè)最終的 reducer 函數(shù)哲虾,然后就可以對(duì)這個(gè) reducer 調(diào)用 createStore。

5.state

????這個(gè)state很是神奇啊择示,每次變動(dòng)state的時(shí)候都會(huì)生成一個(gè)新的state束凑,所以?xún)?nèi)存中就會(huì)有很多不同時(shí)刻的state,

6.因?yàn)樽罱鼊偪凑っぃ行┘?xì)節(jié)說(shuō)的可能不太準(zhǔn)確汪诉,我寫(xiě)這個(gè)就是方便我理解而已。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末谈秫,一起剝皮案震驚了整個(gè)濱河市扒寄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拟烫,老刑警劉巖该编,帶你破解...
    沈念sama閱讀 206,723評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異硕淑,居然都是意外死亡课竣,警方通過(guò)查閱死者的電腦和手機(jī)嘉赎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)于樟,“玉大人公条,你說(shuō)我怎么就攤上這事∮厍” “怎么了赃份?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,998評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)奢米。 經(jīng)常有香客問(wèn)我,道長(zhǎng)纠永,這世上最難降的妖魔是什么鬓长? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,323評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮尝江,結(jié)果婚禮上涉波,老公的妹妹穿的比我還像新娘。我一直安慰自己炭序,他們只是感情好啤覆,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,355評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著惭聂,像睡著了一般窗声。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辜纲,一...
    開(kāi)封第一講書(shū)人閱讀 49,079評(píng)論 1 285
  • 那天笨觅,我揣著相機(jī)與錄音,去河邊找鬼耕腾。 笑死见剩,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的扫俺。 我是一名探鬼主播苍苞,決...
    沈念sama閱讀 38,389評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼狼纬!你這毒婦竟也來(lái)了羹呵?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,019評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤疗琉,失蹤者是張志新(化名)和其女友劉穎担巩,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體没炒,經(jīng)...
    沈念sama閱讀 43,519評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡涛癌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,971評(píng)論 2 325
  • 正文 我和宋清朗相戀三年犯戏,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拳话。...
    茶點(diǎn)故事閱讀 38,100評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡先匪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出弃衍,到底是詐尸還是另有隱情呀非,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評(píng)論 4 324
  • 正文 年R本政府宣布镜盯,位于F島的核電站岸裙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏速缆。R本人自食惡果不足惜降允,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,293評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望艺糜。 院中可真熱鬧剧董,春花似錦、人聲如沸破停。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,289評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)真慢。三九已至毅臊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間黑界,已是汗流浹背褂微。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,517評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留园爷,地道東北人宠蚂。 一個(gè)月前我還...
    沈念sama閱讀 45,547評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像童社,于是被迫代替她去往敵國(guó)和親求厕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,834評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容