什么是 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-