Redux

Motivation

用來處理越漸複雜的 single-page-app 的數據更新/渲染。以 ADLS 中的收藏頁例如：

收藏頁有兩個 Section，兩個分頁中皆須使用標籤列表的數據。當標籤列表在其中一個 Section 更新時，數據須同步更新另一個 Section，並反映至 UI。

Concept

Reducer

用來執行更新的 function

interface SomeState {}

interface SomeAction<T> {
  type: string,
  content: T
}

function reducer(state: SomeState = {}, action: SomeAction) {
  switch (action.type) {
    case "SOME_TYPE":
      //根據 action 的內容來更新 state 並 return 之。
      return Object.assign({}, state);
      break;
    default:
      return state;
  }
}

Single Source of Truth

所有數據來自單一來源

State Is Read-Only

Changes Are Made With Pure Functions