Redux - 核心概念

假設我們應用程式的狀態由名為 initialState 的普通物件描述，如下所示 −

const initialState = {
   isLoading: false,
   items: [],
   hasError: false
};

應用程式中的每行程式碼都更改不了這個狀態。要更改狀態，您需要釋出一個事件。

什麼是事件？

事件是一個帶有 type 屬性的普通物件，用於描述要引起更改的意圖。它必須有一個 type 屬性，用於指示要執行什麼型別的事件。事件命令如下 −

return {
   type: 'ITEMS_REQUEST', //action type
   isLoading: true //payload information
}

事件和狀態由一個名為 Reducer 的函式放在一起。事件隨引起更改的意圖而釋出。此更改由 Reducer 執行。Reducer 是 Redux 中更改狀態的唯一途徑，這使其更具可預測性、集中性和可除錯性。處理“ITEMS_REQUEST”事件的 reducer 函式如下 −

const reducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}

Redux 有一個儲存應用程式狀態的單個 Store。如果要按照資料處理邏輯的基礎拆分程式碼，則應該在 Redux 中拆分 reducers 而不是 stores。

我們將在本教程的後面討論如何拆分 reducers 以及將其與 Store 結合使用。

Redux 元件如下 −