Redux概念之三: Action(動作)與Action Creator(動作建立器)

eyesofkids發表於2017-01-24

這兩個是Flux架構中的參與成員,Redux中有說明Action的定義:

Actions(動作)是從你的應用送往store(儲存)的資訊負載

你可能會一直在Action(動作)這裡看到payload這個字詞,它是負載有效資料的意思,這個字詞的意思解說你可以看一下,不難理解:

Payload用在電腦科學的意思,是指在資料傳輸時的”有效資料”部份,也就是不包含傳輸時的頭部資訊或metadata等等用於傳輸其他資料。它的英文原本是指是飛彈或火箭的搭載的真正有效的負載部份,例如炸藥或核子彈頭,另外的不屬於payload的部份當然就是火箭傳送時用的燃料或控制零件。

這個Action是有一個固定格式的,叫作FSA, Flux Standard Action(Flux標準動作),格式會像下面這樣,是個JavaScript的物件字面定義:

{
  type: `ADD_TODO`,
  payload: {
    text: `Do something.`
  }
}

這樣一個用於描述動作的單純物件字面定義,就稱為Action(動作)。

為什麼要先寫出明確的Actions(動作),也就是把所有的元件會用到的Actions(動作),全部集中寫到一個檔案中?這也是個硬規則,就像你如果參加奧運的體操比賽,每種專案都有規定的動作,在一定的時間內只能作這些動作,按照表定執行。主要還是因為Redux並不知道你的應用程式裡會作什麼動作,需要有一個明確說明有哪些動作的地方,在運作時以這個對照表為基準。

當然,Actions(動作)必需要有type(型別),而且在同一個應用中的type(型別)名稱是不能重覆的,它的概念有點類似於資料表中的主鍵屬性。

那麼Action Creator(動作生成器)又是什麼?

在程式語言的函式庫中,如果是個英文的名詞,通常都是代表某種物件或資料格式,例如Action(動作)就是個單純的物件。如果叫什麼xxxxter或xxxxtor的,中文翻譯是”器”、”者”,通常就是個函式或方法,像上面的reducer和這裡的Action Creator,都是一種函式。

Action creator的設計也是由Flux架構來的產物,它是一種輔助用的函式,用來建立Action的。但因為設計的不同,在Redux中的Action creator比在Flux更簡單,它通常只用來返回Action物件而已,當然它本身是個函式,在返回前是可以再針對返回的動作資料先進行運算或整理的,例如像下面這樣的函式:

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

這個addTodo函式,有一個傳參,這個傳參就會用於組成Action物件中的payload(有效資料)。

如果一個Action物件簡單到連payload(有效資料)都沒有,通常會是個固定payload(有效資料)的動作,例如每動作一次+1或-1,或是每動作一次在true或false值切換,那麼在Redux中允許連Action或Action Creator都可以不用寫了。但是這種情況大概只有在很小的應用,或是學習階段的例子才會這樣,如果應用還是有一定程度的複雜度,一定都是要寫出來的。

當然,Action Creator自然有它很重要的作用,其中之一就是處理有副作用的執行,例如計時器、Fetch/Ajax等等,因為reducer是一個強制無法有副作用的純函式,所以Redux中的副作用會寫在在Action Creator裡,不過這需要再配合中介軟體(middleware)來執行,之後的章節會再說明。

注: Action Creator在Redux中並沒有一定要是個純函式,只是不建議在裡面直接執行有副作用的函式。請參考這篇在stackoverflow的Reduce作者的回答

相關文章