這篇分享的主要還是以非同步的處理為主，重點會擺在 redux-thunk 的使用上，當然 redux 不是只有 redux-thunk 可以處理非同步的動作。

Redux-thunk

redux-thunk 可以簡單理解為 redux 的擴充套件，他能夠讓你的 action 能做的更多，比如非同步的處理(其實也就只是這個)，如果想要看更詳細的解釋什麼是 thunk 的話可以點此連結。

首先，我們先安裝此套件：

npm install redux-thunk
or
yarn add redux-thunk

在使用之前我們先來聊聊 middleware，redux 的 middleware。

Redux middleware

那麼什麼是 middleware呢？

從字面意思上理解，middleware 是“中間件”的意思，就是常常會在大陸開發者網站看到的用語。一個框架的 middleware，就是指這個框架可以讓我們在某個階段執行期間插入我們自定義的一段程序。

官網文檔的說法是：

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

Redux 的 middleware 有幾個特性：

• middleware 的執行時機是由框架確定的，我們只能自定義 code，但無法改變運作的時機點。Redux 的 middleware 是在 dispatch 一個 action，和 action 傳到 reducer 之間調用。
• 可以定義多個 middleware，框架會按照順序依次調用我們的 middleware。
• 如果我們定義了 middleware，那麼在之後每次 dispatch 的時候都會把所有 middleware 都走一遍。

非同步的處理就是基於以上的功能衍生，有了以上認識之後，相信在下面的處理就不會這麼陌生了。

下面我將會示範兩種情境，一種是單用 redux-thunk 作為唯一的 middleware，另一種是可以整合多個 middleware 的做法，基本安裝完後只需要回到 store/index.js 做簡單的修改。

單一個：

// store/index.js
const { createStore, applyMiddleware } = require("redux");
const { reducers } = require("../reducer");
const thunk = require("redux-thunk").default;

const store = createStore(
  reducers, 
  applyMiddleware(thunk)
)

module.exports = {
  store,
}

整合多個的部分，需要額外安裝插件。

npm install redux-devtools-extension
or
yarn add redux-devtools-extension

然後回到 store/index.js 中做修改：

// store/index.js
const { createStore, applyMiddleware } = require("redux");
const { reducers } = require("../reducer");
const thunk = require("redux-thunk").default;
const { composeWithDevTools } = require("redux-devtools-extension");

// 這裡就看還有沒有額外的 middleware 要新增，有的話就加
const middleware = [thunk];
const store = createStore(
  reducers, 
  composeWithDevTools(applyMiddleware(...middleware))
)

module.exports = {
  store,
}

如此就算是安裝完成了，下一篇我們來設定一個簡單非同步的 get API 的功能吧！

參考文章：
redux官方