Redux 異步數據流初探

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是如何工作的：