當前位置:編程學習大全網 - 源碼下載 - redux的三個概念與三大核心

redux的三個概念與三大核心

1、什麽是redux?

壹個組件裏可能會有很多的狀態,比如控制某個內容顯示的flag,從後端獲取的展示數據,那麽這些狀態可以在自己的單個頁面進行管理,也可以選擇別的管理方式,redux就是是壹種狀態管理的方式。

2、為什麽要用redux?

(1) 數據***享,當我們的很多頁面都要用到同壹數據時,就可以把數據放到redux中,達到狀態***享的目的。

(2) 合並管理狀態,業務當中可能會有很多的狀態需要維護,且各個狀態之間可能還有相互依賴的關系,不統壹管理的話很難追蹤狀態的變化。

3、redux的基礎概念

(1) store

store是壹個倉庫,用來存儲數據,它可以獲取數據,也可以派發數據,還能監聽到數據的變化。

(2) action

action理解為動作,action的值壹般為壹個對象,格式如 { type: "", data: "" },type是必須要的,因為reducer處理數據的時候要根據不同的type來進行不同的操作。

(3) reducer

reducer是初始化以及處理派發的action的純函數。

4、如何使用redux?

首先安裝redux的依賴,npm i redux -D

(1) 定義action

(2) 定義處理的action的reducer

(3) 創建store

到這裏,store就創建完成了,在組件裏可以直接引入store和action,進行派發action的操作,此時有壹個Home的組件,我們要在這裏更改state中的數據。

5、redux的三大核心

(1) 單壹數據源

當我們有多個數據需要放到redux中管理時,是放在壹個對象裏,這個對象放在store中管理,雖然redux並沒有強制只能創建壹個store,但是多個數據源的話不那麽容易管理,單壹的數據源可以更好的追蹤狀態的變化。

(2) state是只讀的

想要改變state,無法在組件上直接手動修改state的值,這樣可以保證狀態不會被隨意改變,唯壹的方式就是派發action,而是通過集中管理的形式去改變state。

(3) reducer是純函數

純函數指的是有相同的輸入必定有相同的輸出,在這種情況下,不可以修改入參,也不能發送網絡請求,也不能進行獲取隨機數這樣的操作,通過reducer將上壹個state的狀態和當前派發的action連接起來,返回壹個新的狀態。

6、redux如何進行異步操作?

redux中派發的action默認是只能進行同步的操作的,action被規定為壹個對象,那如果想要在redux中進行異步操作,比如發送網絡請求該怎麽做?

這個時候需要用到中間件,常用的中間件有redux-thunk和redux-saga,需要安裝依賴 npm i redux-thunk -D/ npm i redux-sage -D

redux-thunk允許派發的action為壹個函數,可以在這個函數中進行異步請求,請求執行完成之後再派發壹個同步的action,用於修改store中的數據。

redux-saga派發的action仍然為壹個對象,但是saga在外側攔截action,使用生成器函數來監聽action,當派發的action中的type為監聽的type時,再進行網絡請求的發送,以及改變store中的數據。

這裏演示壹下redux-thunk,在定義store時,需要將中間件傳入

action就可以寫成函數的形式了

7、拆分reducer

當reducer需要處理的邏輯比較多時,壹個reducer需要進行非常多的switch case的判斷,其中有獲取異步請求數據的、有全局保存的狀態,這時候邏輯就會比較雜亂,此時可以將reducer拆分,然後再進行合並。

假設此時有兩個reducer,分別為 countReducer、userInfoReducer,分別的狀態保存在store的countInfo和userInfo,此時可以使用 combineReducer 這個方法來合並

此時返回的reducer仍然是壹個純函數,combineReducer這個函數就是依次執行傳入的reducers,如果store裏儲存的值發生了變化,就返回新的state,如果沒有變化,就返回原來的state。

  • 上一篇:[堆利用入門]arena & heap info & malloc state
  • 下一篇:高分重賞
  • copyright 2024編程學習大全網