1. 程式人生 > >React-Native項目為什麽要使用redux

React-Native項目為什麽要使用redux

更新 cer 復雜 處理 有一個 如果 bin 為什麽 函數返回

對於一些頁面較多、功能復雜,組件之間交互頻繁且結構復雜的App,通過修改state的方式重新渲染頁面,就會出現卡到爆炸的效果,這時就要使用redux了。

下面,我們來看一下使用了redux的APP結構,下面是我按照我的理解畫了一張圖,多出來右邊三個部分,原來container外層多了一個Provide

技術分享圖片

Provider

Provider這個模塊是作為整個App的容器,在你原有的App Container的基礎上再包上一層,它的工作概括起來很簡單,就是使得原組件變得可以接受Redux的store作為props。

Provider內的任何一個組件,如果需要使用state中的數據,必須先將該組件,使用connect方法將其與store中的state綁定到一起.使得組件和store中的state對應起來.

按照我個人的理解,使用provider包裝一層以後,原組件的state可以放在組件的props中去傳遞,並且仍保持更新state重新渲染頁面的特性.使得我們可以通過調用props中的action來改變state對應的組件的顯示效果.高效率的解決了多組件多頁面之間數據交互困難的問題.

Store

在 Redux 應用中,只允許有一個 store 對象,管理應用的 state.可以理解為一個存放APP內所有組件的state的倉庫.

可以通過 combineReducers(reducers) 來實現對 state 管理的邏輯劃分(多個 reducer)。

Action(行動、活動,功能、作用)

在這裏它起到了一個數據的預處理功能,將所有的操作行為,或者事件類型,分門別類的區分開.

Reducer

reducer就是迎接 action 函數返回的線索的 "數據 真·處理函數", action 是"預處理"。行為在被action分門別類以後,

reducer根據數據的類型,去執行不同的處理過程並返回新的state.

redux各模塊之間的聯系

技術分享圖片

將整個項目分為兩個部分,左邊:Provider包裝後的視圖部分;右邊:store,reducer,action構成的邏輯部分.(此處邏輯僅僅代表組件state處理的邏輯部分)

技術分享圖片

Redux運作:   首先store中維護了一個state,   我們在組件內dispatch一個action,   store獲取這個action後,dispatch到actions中,預處理判斷該action的type,   並返回判斷結果給store.store   通過接收到的actionType去reducer中尋找對應的處理過程.   經reducer處理後,返回新的state給store.store根據新state.

React-Native項目為什麽要使用redux