三項原則

Redux 可以用三項基本原則來描述

單一真實來源

應用程式的全域狀態儲存在單一儲存庫內物件樹中。

這使得建立通用應用程式變得容易，因為伺服器的狀態可以序列化並在不需額外編碼工作的情況下注入到用戶端。單一狀態樹也讓除錯或檢查應用程式變得更容易；它也能讓你暫存應用程式的狀態以利開發，加快開發週期。一些傳統上難以實作的功能（例如復原/重做），如果所有狀態都儲存在單一樹中，突然間就變得容易實作了。

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

狀態是唯讀的

變更狀態的唯一方法是發出動作，也就是描述發生了什麼的物件。

這確保了檢視或網路回呼永遠不會直接寫入狀態。相反地，它們表達了轉換狀態的意圖。由於所有變更都是集中式的，並且按照嚴格順序逐一發生，因此沒有需要留意的微妙競爭條件。由於動作只是純粹的物件，因此可以記錄、序列化、儲存，並在稍後用於除錯或測試目的。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

變更使用純函數進行

要指定狀態樹如何透過動作轉換，請撰寫純粹的 reducer。

Reducer 只是純粹的函式，它會取得前一個狀態和一個動作，並回傳下一個狀態。請記得回傳新的狀態物件，而不是變異前一個狀態。你可以從一個單一的 reducer 開始，隨著應用程式的成長，將它拆分成較小的 reducer 來管理狀態樹的特定部分。由於 reducer 只是函式，因此你可以控制它們的呼叫順序、傳遞額外的資料，甚至為常見的任務（例如分頁）製作可重複使用的 reducer。

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)

就是這樣！現在你已經知道 Redux 是什麼了。