三分鐘入門Redux(Redux教程)

學習背景：

我最近在更新師兄之前用React寫的項目，該項目中各元件的狀态依賴關系非常複雜，為了便于管理元件的狀态，師兄使用了Redux。我最近剛轉React，此前沒有用過Redux，借這個難得的機會，我學習了Redux并對其相關知識點進行了梳理。

一 Redux解決了什麼問題？

學習react的朋友都知道元件化是react最擅長的方面，但是在實際開發中，随着應用複雜度地不斷提升，元件之間的狀态通信變得越來越多，元件之間的耦合也變得越來越重。

這時，Redux誕生了，Redux對所有“元件”說：“你們不要在一對一地寫信通知狀态了，我是元件群的‘通信雲盤’，你們把公共狀态存在我這，隻要某個狀态一改變，各元件都能取到狀态的最新值。“

二 使用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的運作原理是什麼？

四 store有哪些重要方法？