React-Redux筆記

過(guò)年期間伺通,除了吃飯打牌以外,似乎還是要來(lái)點(diǎn)正經(jīng)的肉拓。趁著還沒(méi)糜爛致死的早晨,來(lái)打這一篇React-Redux的簡(jiǎn)單筆記梳庆。
最近專(zhuān)案正用React-Redux重構(gòu)某個(gè)服務(wù)暖途,順勢(shì)就用這個(gè)當(dāng)主題寫(xiě)點(diǎn)筆記卑惜。

Redux流程簡(jiǎn)介

React這邊就先不贅述,直接從Redux的概念說(shuō)起驻售。
下圖是Redux的基本流程概念:

Redux流程圖

使用者從頁(yè)面上(View)執(zhí)行任何頁(yè)面上的event時(shí)露久,會(huì)將一個(gè)action給dispatch(把他當(dāng)成一個(gè)會(huì)把a(bǔ)ction丟出去給reducer的函式)出去。
而action定義了這個(gè)action的形態(tài)(type)和一些資料欺栗,來(lái)到reducer階段時(shí)毫痕,就會(huì)遍佈查詢(xún)有沒(méi)有針對(duì)這個(gè)type所做應(yīng)對(duì)的處理,這個(gè)處理就會(huì)將action的資料與原來(lái)的store產(chǎn)生更新迟几。
依據(jù)更新的內(nèi)容消请,會(huì)再向有對(duì)這個(gè)store改變內(nèi)容做訂閱的View發(fā)出更新訊號(hào),View這時(shí)候就會(huì)再依照狀況進(jìn)行re-render类腮。

代個(gè)實(shí)際的小案例臊泰,如果已經(jīng)理解可以跳過(guò)這段。
現(xiàn)在有個(gè)頁(yè)面如下:


頁(yè)面圖示(三個(gè)值分別是id 姓名 點(diǎn)數(shù))

使用者點(diǎn)擊加點(diǎn)按鈕蚜枢,利用dispatch缸逃,發(fā)出一個(gè)加點(diǎn)的action,稱(chēng)作ADD_POINTS_ACTION厂抽,這個(gè)action實(shí)際是一個(gè)function需频,會(huì)回傳一個(gè)物件裡面必定需要type這個(gè)key,這個(gè)案例中type的值設(shè)定成ADD_POINTS_TYPE筷凤,而為了動(dòng)作需要贺辰,這個(gè)物件有時(shí)候會(huì)多帶其他屬性,這邊我們多帶preload這個(gè)key嵌施,並且值為一個(gè)物件{userId:1043551, point:100}饲化。
ADD_POINTS_ACTION被dispatch給reducer後,各個(gè)reducer開(kāi)始看自己有沒(méi)有針對(duì)ADD_POINTS_TYPE做處理吗伤,有的話(huà)就開(kāi)始動(dòng)作吃靠。這邊我們r(jià)educer要做的很簡(jiǎn)單,就是將store裡面足淆,是1043511這個(gè)userId的資料進(jìn)行更新巢块,將他的點(diǎn)數(shù)增加100。
store更新完以後巧号,通知頁(yè)面store裡面的user資料更新了族奢,而原先的頁(yè)面是有註冊(cè)這個(gè)store,因此就重新Render丹鸿。

範(fàn)例結(jié)果

簡(jiǎn)短程式碼

這邊的程式碼除了用Redux越走,也用了React-Redux讓Redux跟React之間更好銜接,算是一種把View跟Store接的更好的一個(gè)解法。

--未完待續(xù)

當(dāng)然自己想純用Redux完成整個(gè)流程是可以的廊敌,不過(guò)這邊是基本介紹就不多做示範(fàn)铜跑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市骡澈,隨后出現(xiàn)的幾起案子锅纺,更是在濱河造成了極大的恐慌,老刑警劉巖肋殴,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件囤锉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡护锤,警方通過(guò)查閱死者的電腦和手機(jī)官地,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蔽豺,“玉大人区丑,你說(shuō)我怎么就攤上這事拧粪⌒薅福” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵可霎,是天一觀(guān)的道長(zhǎng)魄鸦。 經(jīng)常有香客問(wèn)我,道長(zhǎng)癣朗,這世上最難降的妖魔是什么拾因? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮旷余,結(jié)果婚禮上绢记,老公的妹妹穿的比我還像新娘。我一直安慰自己正卧,他們只是感情好蠢熄,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著炉旷,像睡著了一般签孔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上窘行,一...
    開(kāi)封第一講書(shū)人閱讀 52,807評(píng)論 1 314
  • 那天饥追,我揣著相機(jī)與錄音,去河邊找鬼罐盔。 笑死但绕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的惶看。 我是一名探鬼主播壁熄,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼帚豪,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了草丧?” 一聲冷哼從身側(cè)響起狸臣,我...
    開(kāi)封第一講書(shū)人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎昌执,沒(méi)想到半個(gè)月后烛亦,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡懂拾,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年煤禽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岖赋。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡檬果,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出唐断,到底是詐尸還是另有隱情选脊,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布脸甘,位于F島的核電站恳啥,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏丹诀。R本人自食惡果不足惜钝的,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望铆遭。 院中可真熱鬧硝桩,春花似錦、人聲如沸枚荣。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)棍弄。三九已至望薄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間呼畸,已是汗流浹背痕支。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蛮原,地道東北人卧须。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親花嘶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子笋籽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

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