React總結篇之九_擴展Redux

• 中間件
• Store Enhancer

一、中間件
中間件的特點是：

• 中間件是獨立的函數
• 中間件可以組合使用
• 中間件有一個統計的接口

1. 中間件接口
   在Redux框架中，中間件處理的是action對象，而派發action對象的就是Store上的dispatch函數，action對象在進入reducer之前，會經歷中間件的管道。在這個中間件管道中，每個中間件都會接收到action對象，在處理完畢之后，就會把action對象交給下一個中間件來處理，只有所有的中間件都處理完action對象之后，才輪到reducer來處理action對象，但是如果某個中間件覺得沒有必要繼續處理這個action對象了，就不會把action對象交給下一個中間件，對這個action對象的處理就此為止，也就輪不到reducer上場了。
   以action為參數的函數對傳入的action對象進行處理，因為JavaScript支持閉包，在這個函數里可以訪問上面兩層函數的參數，所以可以根據需要做很多事情，包括以下功能：

   • 調用dispatch派發出一個新的action對象；
   • 調用getState獲得當前Redux Store上的狀態；
   • 調用next告訴Redux當前中間件工作完畢，讓Redux調用下一個中間件；
   • 訪問action對象action上的所有數據；
     具有上面這些功能，一個中間件足夠獲取Store上的所有信息，也具有足夠能力控制數據的流轉。

2. 使用中間件
   使用中間件有兩種方法，兩種方法都離不開Redux提供的applyMiddleware函數。
   （1）用Redux提供的applyMiddleware來包裝createStore產生一個新的創建Store的函數，以使用redux-chunk中間件為例，代碼如下：
   
   （2）把applyMiddleware的結果當做Store Enhancer，和其他Enhancer混合之后作為createStore參數傳入。以同時使用redux-thunk和Redux Devtools增強器為例，代碼如下：
   

3. Promise中間件
   實現異步action對象還有一個方法是利用promise，promise更加適用于輸入輸出操作，而且fetch函數返回的結果就是一個promise對象。對比redux-chunk和promise可以發現，如果應用redux-chunk，實際發起異步操作的語句是在中間件中調用的，而如果應用promise中間件，異步操作是在中間件之外引發的，因為只有異步操作發生了才會有promise對象，而promise中間件只是處理這個對象而已。

4. 中間件開發原則
   開發一個redux中間件，首先明確中間件的目的，因為中間件可以組合使用，所以不要讓一個中間件的內容太過臃腫，盡量讓一個中間件只完成一個功能，通過中間件的組合來完成豐富的功能。

二、Store Enhancer
中間件可以用來增強Redux store的dispatch方法，但也僅限于dispatch方法，也就是從dispatch函數調用到action對象被reducer處理的這個過程中的操作，如果想要對redux store進行更深層次的增強定制，就需要使用Store Enhancer。

1. 增強器的接口
2. 增強實例reset