Redux Study Day2 - Action

延續前一天的學習，今天進入 Redux Day2!

先從簡單的 Action 開始做

Action

一般來說 Action 就是 View 要與資料做互動的一個介面，View 自己本身不會變更 View 自己的畫面資料，而是透過呼叫 Action。
詳細的流程可以參考 Flux 的流程圖！

基本的 Action 都會包含兩種東西

  • type: Action Type
  • payload: Payloads

如果參考 Flux Standard Action，還有以下兩項：

  • error
  • meta

但是以上兩項是 optional 的，有需要可以參考文件說明

所謂的 Action Type，就是一種分類，有了這個分類，提供給 Dispatcher 才可以知道後續的流程是什麼。

至於 Payloads，其實就把它想做參數就簡單了

其實意思就是說，你提供一組資料，告訴 Dispatcher，由他來分類給不同的方法來執行，Payloads 就是方法的參數

就有點像是下面的樣子： 

1
{
2
  type: 'ADD TODO'.
3
  payload" { text: 'new todo' }
4
}

但是因為有時候，我們的 Payload 會是畫面上的一些資料，為了要做到互動的效果，所以我們的 action 不一定會是靜態的 object。
所以就有所謂的 Action Creators

Action Creators

這些 Action Creators 是用來產生 Action 的方法，一般都是簡單的方法，透過傳遞參數來變更 payload 的內容。 

1
function addTodo(text) {
2
  return {
3
    type: ADD_TODO,
4
    payload: text
5
  };
6
}

在 Redux 裡，你只要回傳 action 物件就可以。
所以測試就變得非常簡單，因為不會有什麼特別的方法是屬於 flux framework 的方法。

實作

根據專案的結構，我們就在專案中建立一個 action 的目錄，然後把所有的 Action 都放在這邊
所以我們就可以建立一個 index.js 在這邊

以 redux news 的其中一個方法為範例： 

1
export const REQUEST_ITEMTHREADS = 'REQUEST_ITEMTHREADS';
2
function requestItemThreads () {
3
  return {
4
    type: REQUEST_ITEMTHREADS, // must have type
5
    text: 'Requesting the top item threads'
6
  }
7
}

結語

Action 其實在 Flux 的流程裡面是一個很重要的項目，但是不管是什麼 Flux framework，這個部分也都有，所以，不太難理解。
不過，因為 Redux 有一些方法可以做到 dispatch，在 Action 這邊也就變得很單純了～～～