[ReactJS] 改變 state 要寫在 action creator 裡還是 reducer 裡?



雖然從兩年前就知道 React 了,但是直到最近這兩個月才真的有機會把它用在 production 上,忙碌的寫 code 人生中也學到了一些有趣的東西。上禮拜有幾個值得記錄下來避免忘記的討論,其中我覺得最重要的是一個是:「改變 state 要寫在 action creator 裡還是 reducer 裡?」,所以在很久沒寫網誌的情況下,還是努力對抗懶惰蟲給寫完了,希望各位先進前輩指導交流。

先提一下我們基本的 stack 是 ReactJS + Redux + redux-saga,所以下面的範例也是以這樣的基礎上敘述,同時避免文章落落長導致結論沒人看,先說我們最後的結論是
reducer 負責 state 的變化,如果有牽扯到 async 的 API 呼叫 (side effects),則是在 redux-saga 這層裡面處理。

根據我們最後討論出來的東西如果寫成程式大概會長這樣:

那如果不是將改變 state 的邏輯寫在 reducer 裡的差別會在哪呢?在一些 Open Source 的 repo 裡我們有看到一些如下面範例的寫法,將改變 state 的邏輯寫在 action creator 裡,然後 reducer 大都只需要原封不動的將值取出來然後改變 store 裡的 state,Redux 的作者認為這樣是一種 anti-pattern 的寫法。

不過結論其實很簡單,因為 Redux 的官方文件第一段就說了:
Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of a reducer.

參考來源:

https://gist.github.com/kof/9ead8b0899e2e1306311#gistcomment-1678816
https://gist.github.com/kof/9ead8b0899e2e1306311#gistcomment-1690390




同場加映:

action 的參數要多一層 payload 嗎?答案是要,根據 FSA (Flux Standard Action) 來說是要的,好處是在取得 payload 上有一致性,也不用擔心有新手工程師會在 payload 裡面放了一個叫 type 的 attribute,結果把重要的 action type 給 override 了......