第 25 天 !

我們知道 redux 結構 flux-like ，

那麼他的每個階段是在處理什麼？

store

這是管理 redux 資料的地方，

但跟 flux 不一樣的是，

在 redux 裡， 是不能直接設定 store，

必須去透過 reducer 返回的值來確定最後 store 保存的資料

action

當我們想要去操作 store 時，我們不能直接去更改它裡面的資料，

我們必須去定義這個 action ， 來告訴 reducer 應該怎麼樣處理資料，

那 action 會是一個 plain object ，

但我們一定要在這個 object 裡面有一個 type 參數，

這 type 會是一個字串，用來形容我們這個 action ，

再來，我們需要帶入參數的話，

通常會增加一個 payload 參數來保存我們需要帶入的數據，

加入我們有一個動作是一個登入，

那我們的 action 格式會是：

const loginAction = {
  type: 'LOGIN',
  payload: {
    account: 'test',
    password: '1234',
  },
};

action creator

action type 是常數，不變的，但是 payload 的數據會根據情境而產生一些差別，

我們可以定義一個 action creator 來讓這個 action 可以重複利用，

action creator 是一個 function ， 會 return 一個 action

like:

function loginAction(account, password) {
  return {
    type: 'LOGIN',
    payload: {
      account,
      password,
    },
  };
}

到時候我們要使用這個 action ， 我們就可以直接呼叫 loginAction ， 就不需要一直去寫 action 的格式了

dispatch

如果說我們是在 action 去定義資料操作的事件，

那又要如何去觸發 store 的更新呢？

在 redux 裡，只能用 dispatch ，

dispatch 的功用就是，去觸發 store 的更新流程，

它唯一接收的是 action object，

並把 action object 帶入到更新流程

dispatch({
  type: 'LOGIN',
  payload: {
    account: 'account',
    password: 'password',
  },
});

or with action creator :

dispatch(loginAction());

reducer

這是在 redux 裡，最核心的一個部分，

它負責整合 store 跟從外部接收的資料，

return 的資料會由 store 保存

function reducer(state = initialState, { type, payload }) {
  switch (type) {
    case ACTION_TYPE:
      return { ...state, ...payload };
    default:
      return state;
  }
}

它會接收兩個參數：

• 目前的 state
• action 資料

那我們會由 action.type 來判斷我們最終應該要如何保存的 state，

有幾點需要注意的是：

• 在 reducer 無法使用非同步
• 我們應該是以 state & action 的資訊來組成新的 state，而不是還需要在額外引入數據
• 在 redux 判定資料的變化更新是用 immutable update 來判定，所以當我們在更新 state 的時候，要把state 複製並且更新該更新的部分