如果你點開了這篇文章,說明你已經開始注意到redux了,網上關于redux的介紹很多,此處不多介紹了.

網上關于redux的原理介紹文章也有很多,我自己在學習redux的時候,翻看了很多優秀的文章,每一篇汲取一些營養并且互相對照,逐漸的在自己的腦海里簡歷了一個對redux的結構認識.寫下此文,一方面是總結分析一下自己學習的所得,也希望可以從我理解的角度,來描述一下redux,給大家學習和理解redux提供一個參照.

原理分析:

在講將redux運用到react-native項目中之前,我們先分析一下沒有使用redux的項目.這種項目,大概可以概括一下就是整個APP作為容器,里面存放有多個父組件,子組件,孫子組件,各個組件都含有state和props這兩個最重要的屬性.

未使用redux的結構略圖

React有props和state: props意味著父級分發下來的屬性，state意味著組件內部可以自行管理的狀態，并且整個React沒有數據向上回溯的能力，也就是說數據只能單向向下分發，或者自行內部消化state的變化會引起頁面的刷新.

react中props的流向

組件之間交互比較困難,當APP中頁面較多,頁面內組件比較復雜,通過修改state的方式重新渲染頁面,就會出現卡到爆炸的效果.所以這種方式只適合實現一些功能相對單一,頁面簡單,頁面之間交互較少,結構簡單的APP.

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

使用redux的app結構略圖

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各模塊之間的聯系

redux各模塊關系略圖

將整個項目分為兩個部分:

1.Provider包裝后的視圖部分.

2.store,reducer,action構成的邏輯部分.(此處邏輯僅僅代表組件state處理的邏輯部分)

redux運作過程圖

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