# 使用middleware(中介軟體)處理異步動作
今天的主題是在Redux中處理副作用，我們要使用的是一個稱為`middleware`(中介軟體)的技巧來作，這在Redux裡就有內建這個設計了。以目前來說，`middleware`(中介軟體)是最簡單的一種解決在Redux中副作用問題的方式，也有很多這種`middleware`套件，不過在這個例子中並沒有使用像Redux作者開發的[redux-thunk](https://github.com/gaearon/redux-thunk)套件，我把它放在補充說明裡。
這個程式最後的呈現結果，就像下面的動態圖片這樣:
> 註: 本文章同步放置於[Github庫的這裡](https://github.com/eyesofkids/ironman2017/tree/master/day28_redux_ex4/)，所有的程式碼也在裡面。
## 程式碼說明
一樣是繼續使用上一章接著用下來的ES6的樣版文件[webpack-es6-startkit](https://github.com/eyesofkids/webpack-es6-startkit)。
如同之前的[React這篇](https://github.com/eyesofkids/ironman2017/tree/master/day23_lifecycle)中，我們一樣使用[json-server](https://github.com/typicode/json-server)在自己的電腦上另外啟動一個伺服器，作為獲取資料的伺服器之用，items.json是已經有一些資料的範例資料檔案，也有附在github的原始碼位置中，用下面的指令來啟動json-server:
```
json-server --watch --port 5555 items.json
```
如果正確啟動json-server，你應該可以在瀏覽器網址上輸入`http://localhost:5555/items/`，正常看到這幾筆範例資料。
今天的範例中，實際上對之前的`MyComponent`元件有進行改造的作業，把它切成兩個小元件，分別是用於輸入項目的`ItemInput`與顯示每個項目的`ItemList`，然後在`MyComponent`元件只是作組合的，這部份主要是為了要展示Redux store在進行綁定時，用不同的傳入參數的彈性作法。
index.html檔案沒變，就略過不說了。
一樣我們先從reducer來看，下面這是新的reducer程式碼:
> reducer.js
```javascript
import { combineReducers } from 'redux'
import { ADD_ITEM, DEL_ITEM, INIT_ITEMS } from './actionTypes'
function items(state = [], action) {
switch (action.type) {
case ADD_ITEM:
{
return [{
id: action.id,
text: action.text,
}, ...state]
}
case DEL_ITEM:
{
return state.filter(item => item.id !== action.id)
}
case INIT_ITEMS:
{
return [...action.items]
}
default:
return state
}
}
const itemApp = combineReducers({ items })
export default itemApp
```
這個reducer與前一個的範例的差異只有多一個`INIT_ITEMS`的Action(動作)情況，它是要在從伺服器上獲取資料後，初始化store中的items記錄用的，這個名稱可能不是太好，或許取名叫`LOAD_ITEMS`也可以。
另一個明顯的改進作法，是把所有的Action Type(動作類型)，全部都轉為常數字串值，也就是變為常數，但是裡面指定的是原來的字串值。這個常數的定義放在actionTypes.js這檔案，程式碼其實簡單到不行:
> actionTypes.js
```javascript
export const ADD_ITEM = 'ADD_ITEM'
export const DEL_ITEM = 'DEL_ITEM'
export const FETCH_ITEMS = 'FETCH_ITEMS'
export const INIT_ITEMS = 'INIT_ITEMS'
```
你可能會問，這樣作是有什麼用處？或是這樣作是在搞笑嗎？
會這樣作是有原因的，而且它是一種改進的作法，我在本章的下面有附它的說明，先簡單的說一下主要的原因:
> 因為單純的字串值是不會作任何檢查的，以簡單的例子來說明，假設現在有一個動作類型應該是`'ADD_TODOITEM'`這個字串值，在動作生成器(Action Creator)或reducer中，打錯這個字串像`'ADD_TODO_ITEM'`，當你在開發與執行時，系統都不會有錯誤的訊息，只是不會如預期的執行結果。但是如果是個常數則會檢查，錯了也有錯誤訊息。
接著來看建立store的部份，你應該要養成習慣了，我們從一開始的Redux範例到這一章，其實我的解說順序就應該是撰寫程式碼的大致上的順序，你如果要看一支用Redux寫的程式，順序也是這樣來看，整體的思維才會清楚。架構型的函式庫或框架都有基本的套用或架構起來的步驟，如果你不按這個次序，那會理解得零亂組合不起來。
建立store的部份在index.js中，它也是React應用最上層的元件，程式碼如下:
> index.js
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import itemApp from './reducer'
import MyComponent from './app'
import fetchMiddleware from './fetchmiddleware'
// @Store
//
// store = createStore(reducer)
// 使用redux dev tools
// 如果要正常使用是使用 const store = createStore(dealItem, applyMiddleware(fetchMiddleware))
const store = createStore(itemApp,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
applyMiddleware(fetchMiddleware))
ReactDOM.render(
,
document.getElementById('root'))
```
`index.js`的更動部份有一個，第一個是它在匯入時，多從redux匯入[applyMiddleware](http://redux.js.org/docs/api/applyMiddleware.html)方法，以及匯入一個名稱為`fetchmiddleware`的模組，這個檔案是你自己要提供的。
第二個是它在建立store時，多加了一個傳入參數`applyMiddleware(fetchMiddleware)`，也就是說middleware(中介軟體)的套用，是在store一開始就需要套用的，這一個你一定要記得。
fetchMiddleware的程式碼也很簡單，像下面這樣:
> fetchMiddleware.js
```javascript
import { FETCH_ITEMS } from './actionTypes'
const fetchMiddleware = (store: any) => (next: any) => (action: Object) => {
if (action.type !== FETCH_ITEMS) return next(action)
// 這是獲取伺服器上的資料的fetch語法，
// 注意最後會執行action.cb(json, store.dispatch)
// 也就是onFecthData中的cb屬性
fetch('http://localhost:5555/items/')
.then(response => response.json())
.then(json => action.cb(json, store.dispatch))
.catch((err) => { throw new Error(err.message) })
}
export default fetchMiddleware
```
因為middleware(中介軟體)其實有基本的語法樣式，本章的後面有附說明，其實在簡單的情況下，你也不需要用什麼額外的套件，自己寫可能快一點，基本的樣式像下面這樣:
```javascript
const customMiddleware = store => next => action => {
if(action.type !== 'custom') return next(action)
// 這裡作你要作的事
}
```
這看起來可怕的三個肥箭頭，相當於下面這樣的寫法的簡寫法，它只是一種巢狀(內部)函式的寫法，是是一種閉包結構的實現，至於為什麼要這樣作，這與middleware的設計有關:
```javascript
const customMiddleware = function(store) {
return function(next) {
return function(action) {
if(action.type !== 'custom') return next(action)
action(next, store.getState) // invoke the action
}
}
}
```
middleware(中介軟體)的執行期間是介於`dispatch(action)`與最後執行`reducer`之間，而且可以執行多個middleware。也就是說，在最後真正把Action送到reducer前，middleware會先執行，處理完成再作送到reducer去，所以我們的程式在要從伺服器中獲取資料時，會像下面這樣的流程:
1. 使用者按下"從伺服器獲取資料"按鈕，觸發事件
2. 呼叫dispatch(發送)的動作類型為`FETCH_ITEMS`的動作，也就是執行`onFecthData`這個Action Creator(動作產生器)
3. dispatch呼叫`onFecthData`產生物件，Redux先經過middleware，fetchMiddleware裡有對`FETCH_ITEMS`的動作的處理函式，進行處理
4. fetchMiddleware結束執行，最後產生資料，呼叫dispatch(發送)的動作類型為`INIT_ITEMS`的Action Creator(動作產生器)`onInitData`
5. dispatch呼叫`onInitData`後產生物件，Redux最後送到reducer
所以接著我們來看actons.js這個檔案，這是所有Action Creators(動作產生器)的集中的地方，程式碼如下:
> actons.js
```javascript
import { ADD_ITEM, DEL_ITEM, FETCH_ITEMS, INIT_ITEMS } from './actionTypes'
// onItemAdd處理產生'ADD_ITEM'的動作物件，注意傳入參數是payload
export const onItemAdd = (text: string) => (
{ type: ADD_ITEM,
id: +new Date(),
text,
}
)
// onItemAdd處理產生'ADD_ITEM'的動作物件，注意傳入參數是id
export const onItemDel = (id: number) => ({ type: DEL_ITEM, id })
// onInitData是初始化用的，這是準備要讓reducer重新載入store裡面的items值
export const onInitData = (items: Array