redux-promise-middleware

其實我不是很喜歡用 redux，因為常常要為了做一件簡單的事情做很多步驟，例如要修改一個 state 內的數值就必須透過 actionType→action→reducer，就像脫褲子放屁一樣，而且遇到非同的事情就很麻煩

在一開始學習 React 的時候我就遇到了這個問題，假設我想要按下某個按鈕，使用 ajax 取得 json 再更新 state

想當時我就用了一個方法，就是我做了三個 action，並且在按鈕元件的 function 內呼叫 ajax ，根據回傳的結果來觸發三種不同的 action。這當然可行，但是把 ajax 放在元件裡面其實會讓元件的可用性變低。

redux-promise-middleware 就可以解決這個問題，它可以讓我們的非同步 action 控管比較簡單，舉例來說我們會因為 ajax 的成功與否定義三種常數型態。

但是如果用插件的話就可以簡化這個流程，變成這樣

於是我們的 action 就會修改為以下，有一個 payload，就是在告訴 middleware 要去自動幫我們把裡面的 Promise 執行，根據執行的結果會產生三種不同的 action type ADDCOUNT_PENDING , ADDCOUNT_REJECTED , ADDCOUNT_FULFILLED 到我們的 reducer。

最後我們的 reducer 透過 type-to-reducer 這個套件幫我們快速的配對，其實不要用這個套件也可以，就是照普通的寫法去 switch 那三種 action。

總結

其實有很多套件都可以做到一樣的事情，例如 redux-thunk、redux-saga 等等，純粹就是學習一下我之前沒有碰過的套件，並且分享回饋。