Redux 簡介
用React寫的項目中各組件的狀態依賴關係非常複雜,爲了便於管理組件的狀態,使用 Redux。
組件化是react最擅長的方面,但是在實際開發中,隨着應用複雜度地不斷提升,組件之間的狀態通信變得越來越多,組件之間的耦合也變得越來越重。
這時,Redux誕生了。
Redux對所有“組件”說:
你們不要在一對一地寫信通知狀態了,我是你們的 “通信雲基站”,你們把公共狀態存在我這,只要某個狀態一改變,各組件都能取到狀態的最新值。
在Redux中,最爲核心的概念就是 state、action 、reducer 以及 store,單詞大家都懂,就是初學者不知道該怎麼用。
result
以常見的紅路燈爲例,將其應用到Redux中:
action:就是燈的變化,"紅變綠"等,用名詞表述 state:就是燈的名字,紅燈、綠燈等,用名詞表述 reducer:就是燈的變化規則,紅燈之後是綠燈等,用狀態轉移表述,歸根到底也是名詞 store:就像是交警,執行上述的交通規則;
image.png
image.png
Redux 的精髓 API
(1)store: store對象是保存公共數據的地方,一個應用只能創建一個store。下面是創建store方式:
import { createStore } from 'redux'; const store = createStore(function);
(2)state:state是store映射的數據集合,一個 state 只對應一個 view,下面是創建state方法:
import { createStore } from 'redux'; const store = createStore(function); const state = store.getState(); // 通過store.getState()拿到state
(3)action:state和view捆綁在一起,view發生變化時會用action發出通知。action是改變state的唯一方法,它本質是一個對象,必須要寫一個代表action名稱的屬性——type。除此之外,其他屬性可以自由設置,下面是action對象示例:
const action = { type: 'student_age', age: 12 };
(4)store.dispatch():store.dispatch()是 view 發出 action 的唯一方法,也可以理解爲發射action通知的唯一方法。下面是使用store.dispatch()的代碼示例:
store.dispatch({ type: 'student_age', age: 12 });
(5)reducer:reducer是一個計算state的函數,接受兩個參數,當前的state和action。當store收到action通知後,一定要返回一個全新的state,這樣view才能發生變化。store接收到action傳來的數據,然後根據邏輯計算數據,這個過程就稱爲reducer。下面是reduer的代碼示例:
import { createStore } from 'redux'; const reducer = (state = defaultState, action) => { switch (action.type) { case 'student_age': return state + action.age; default: return state; }}; const store = createStore(reducer); // 生成store時傳入reducer
實際開發中要在生成store時傳入reducer,這樣store.dispatch()會自動觸發reducer函數執行。
(6)store.subscribe():store.subscribe()監聽state變化,state一旦變化就自動觸發該函數。下面是它的代碼示例:
import { createStore } from 'redux'; const store = createStore(reducer); store.subscribe(listener);
通過一張圖來看一下redux、react-redux是如何工作的: