前端知識 | Redux的使用



什麼是 Redux?

Redux 是整個項目的狀態管理中心,數據存儲倉庫,集中式的存儲和管理所有的組件的狀態,並且可以讓組件的狀態以一種可預測的方式變化。


什麼情況下使用 Redux?

Redux 主要作爲一個狀態樹的存在,主要作用可以用來集中管理共享數據,如果你想取某個數據,你就直接從狀態樹(store)上拿,你修改數據,其他頁面上從狀態樹上取到的數據也會發生改變(如果你用了 subscribe 監聽函數或者使用了 react-redux 類似的庫幫你監聽,則其他頁面取到的數據會自動更新),Redux 不是必須的,它的使用場景是當你覺得項目內的組件通信太過於繁瑣的時候使用,比如你有很多頁面,很多組件,他們之間的通信很麻煩,或者說有些數據你需要保存起來供所有組件使用,這時候 Redux 的作用就體現出來了。


正如 Redux 的作者所說:


       Flux 架構就像眼鏡:您自會知道什麼時候需要它。



核心概念


action

action 是一個對象,它包含了引起 store 狀態變化的行爲,他是將數據運輸至 store 裏的唯一手段。它通常包含一個 type 屬性和一個需要傳入 store 的數據,數據類型可以自定義。比如我們在做用戶登錄的時候經常需要將用戶信息保存到 Redux,這時候 action 就可以是:


reducer

action 僅僅申明瞭我們想要改變 store 以及附帶的數據,那麼我們到底怎麼去改變數據呢,比如說有一天用戶的 money 變爲2000,那麼傳入的 action 是:



那麼這時候我們要怎麼取改變 store 裏面的值呢?這時候就要用到 reducer



簡單來說,reducer 就是根據傳入 actioon 類型描述如何去更改 store 中的狀態。

 

store


單一狀態樹

action 描述了更改數據行爲的發生,reducer 描述瞭如何去更改數據,那麼我們數據還要有一個歸宿就是 store,Redux 的核心就是一個 store 對象,它裏面包含着我們所儲存的所有狀態,它類似一個物流中心,我們可以往裏面存放數據,也可以從裏面取出數據。它提供的方法包括:


       1、getState() 獲取當前的的 state 狀態值


       2、dispatch(action) 派發一個 action 行爲更新 state


       3、subscribe(listener) 註冊一個監聽器(當 state 跟新完了之後會自動執行)

 

這樣這三個東西就串聯在一起了。

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

 

說了這麼多,我們最後上個例子吧:


app.js

 

action.js

 

reducer.js

 

store.js

 

PS:這是最原始的 Redux 使用方法,在實際開發中,通常還會結合 create-redux 等插件一起使用。






 -END- 




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章