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映射的功能就好了)
????mapDispatchToProps:它接收dispatch作為參數(shù)价认,將當(dāng)前組件會(huì)用到的dispatch(action)映射到當(dāng)前組件的事件回調(diào)函數(shù)fun上,這里講action換個(gè)名字注入到props里面自娩,然后可以在組件內(nèi)部調(diào)用用踩,直接dispatch(action)就好了。
? ? 在這里解釋一下bindActionCreators,這個(gè)東西是把當(dāng)前組件的action傳到它的子組件上的一個(gè)方法捶箱,在子組件標(biāo)簽上展開(kāi)就好了。具體我也沒(méi)用過(guò)动漾,用到了再來(lái)補(bǔ)充丁屎。
????上面的圖片中,將兩個(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。
? ? reducer這里有個(gè)輔助函數(shù)蛉威,將所有的reducer整合到一個(gè)大的reducer里日丹,傳給createStore做參數(shù)。
????會(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,