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 這邊也就變得很單純了~~~