前端知識 | Redux的使用

什么是 Redux?

Redux 是整個項目的狀態(tài)管理中心涯穷,數(shù)據(jù)存儲倉庫,集中式的存儲和管理所有的組件的狀態(tài),并且可以讓組件的狀態(tài)以一種可預(yù)測的方式變化邦投。

什么情況下使用 Redux邓嘹?

Redux 主要作為一個狀態(tài)樹的存在酣栈,主要作用可以用來集中管理共享數(shù)據(jù),如果你想取某個數(shù)據(jù)汹押,你就直接從狀態(tài)樹(store)上拿,你修改數(shù)據(jù)矿筝,其他頁面上從狀態(tài)樹上取到的數(shù)據(jù)也會發(fā)生改變(如果你用了 subscribe 監(jiān)聽函數(shù)或者使用了 react-redux 類似的庫幫你監(jiān)聽,則其他頁面取到的數(shù)據(jù)會自動更新)棚贾,Redux 不是必須的窖维,它的使用場景是當(dāng)你覺得項目內(nèi)的組件通信太過于繁瑣的時候使用,比如你有很多頁面妙痹,很多組件铸史,他們之間的通信很麻煩,或者說有些數(shù)據(jù)你需要保存起來供所有組件使用,這時候 Redux 的作用就體現(xiàn)出來了怯伊。

正如 Redux 的作者所說:

Flux架構(gòu)就像眼鏡:您自會知道什么時候需要它琳轿。

核心概念

action

action 是一個對象,它包含了引起 store 狀態(tài)變化的行為,他是將數(shù)據(jù)運輸至 store 里的唯一手段耿芹。它通常包含一個 type 屬性和一個需要傳入 store 的數(shù)據(jù)崭篡,數(shù)據(jù)類型可以自定義。比如我們在做用戶登錄的時候經(jīng)常需要將用戶信息保存到 Redux猩系,這時候 action 就可以是:

reducer

action 僅僅申明了我們想要改變 store 以及附帶的數(shù)據(jù)媚送,那么我們到底怎么去改變數(shù)據(jù)呢,比如說有一天用戶的 money 變?yōu)?000寇甸,那么傳入的 action 是:

那么這時候我們要怎么取改變 store 里面的值呢塘偎?這時候就要用到 reducer

簡單來說,reducer 就是根據(jù)傳入 actioon 類型描述如何去更改 store 中的狀態(tài)拿霉。

store

單一狀態(tài)樹

action 描述了更改數(shù)據(jù)行為的發(fā)生吟秩,reducer 描述了如何去更改數(shù)據(jù),那么我們數(shù)據(jù)還要有一個歸宿就是 store,Redux 的核心就是一個 store 對象绽淘,它里面包含著我們所儲存的所有狀態(tài)涵防,它類似一個物流中心,我們可以往里面存放數(shù)據(jù)沪铭,也可以從里面取出數(shù)據(jù)壮池。它提供的方法包括:

1偏瓤、getState() 獲取當(dāng)前的的 state 狀態(tài)值

2、dispatch(action) 派發(fā)一個 action 行為更新 state

3椰憋、subscribe(listener) 注冊一個監(jiān)聽器(當(dāng) state 跟新完了之后會自動執(zhí)行)

這樣這三個東西就串聯(lián)在一起了厅克。

store.dispatch(action) 用來接收不同的 action,表明要更新 state 的 type 類型以及更新需要的數(shù)據(jù)橙依,再通過 reducer 函數(shù)計算到底怎么去更改 state证舟,加還是減。

說了這么多窗骑,我們最后上個例子吧:

app.js


action.js


reducer.js


store.js


PS:這是最原始的 redux 使用方法女责,在實際開發(fā)中,通常還會結(jié)合 create-redux 等插件一起使用创译。



-END-

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抵知,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子昔榴,更是在濱河造成了極大的恐慌辛藻,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件互订,死亡現(xiàn)場離奇詭異吱肌,居然都是意外死亡,警方通過查閱死者的電腦和手機仰禽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門氮墨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人吐葵,你說我怎么就攤上這事规揪。” “怎么了温峭?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵猛铅,是天一觀的道長。 經(jīng)常有香客問我凤藏,道長奸忽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任揖庄,我火速辦了婚禮栗菜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蹄梢。我一直安慰自己疙筹,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著而咆,像睡著了一般霍比。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上翘盖,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天桂塞,我揣著相機與錄音凹蜂,去河邊找鬼馍驯。 笑死,一個胖子當(dāng)著我的面吹牛玛痊,可吹牛的內(nèi)容都是我干的汰瘫。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼擂煞,長吁一口氣:“原來是場噩夢啊……” “哼混弥!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起对省,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤蝗拿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蒿涎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哀托,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年劳秋,在試婚紗的時候發(fā)現(xiàn)自己被綠了仓手。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡玻淑,死狀恐怖嗽冒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情补履,我是刑警寧澤添坊,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站箫锤,受9級特大地震影響贬蛙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜麻汰,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一速客、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧五鲫,春花似錦溺职、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乱灵。三九已至,卻和暖如春七冲,著一層夾襖步出監(jiān)牢的瞬間痛倚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工澜躺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蝉稳,地道東北人。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓掘鄙,卻偏偏與公主長得像耘戚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子操漠,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,925評論 2 344

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