redux中間件的用法

1.定義

中間件就是一個函數，對store.dispatch方法進行了改造，在發出 Action 和執行 Reducer 這兩步之間，添加了其他功能。

2.舉例 日志中間件

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();const store = createStore(reducer,applyMiddleware(logger)
);

在這里，redux-logger提供一個生成器createLogger，可以生成日志中間件logger。然后，將它放在applyMiddleware方法之中，傳入createStore方法，就完成了store.dispatch()的功能增強。

3.applyMiddlewares()方法

applyMiddlewares()是 Redux 的原生方法，作用是將所有中間件組成一個數組，依次執行。

4.異步操作的思路

1.同步操作只要發出一種 Action 即可，異步操作的差別是它要發出三種 Action。分別是操作發起，操作成功，操作失敗

以抓取數據為例，共有兩種寫法

// 寫法一：名稱相同，參數不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }// 寫法二：名稱不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

異步操作的思路

• 操作開始時，送出一個 Action，觸發 State 更新為"正在操作"狀態，View 重新渲染
• 操作結束后，再送出一個 Action，觸發 State 更新為"操作結束"狀態，View 再一次重新渲染

5?redux-thunk 中間件

?操作結束自動發出一個action?加載成功后（componentDidMount方法），它送出了（dispatch方法）一個 Action，向服務器要求數據?fetchPosts(selectedSubreddit)。這里的fetchPosts就是 Action Creator。fetchPosts是一個Action Creator（動作生成器），返回一個函數。這個函數執行后，先發出一個Action（requestPosts(postTitle)），然后進行異步操作。拿到結果后，先將結果轉成 JSON 格式，然后再發出一個 Action（?receivePosts(postTitle, json)。返回的是對象而不是函數，就要使用中間件redux-thunk


異步操作的第一種解決方案就是，寫出一個返回函數的 Action Creator，然后使用redux-thunk中間件改造store.dispatch。

6.redux-promise中間件。

另一種異步操作的解決方案，就是讓 Action Creator 返回一個 Promise 對象。這就需要使用redux-promise中間件。這個中間件使得store.dispatch方法可以接受 Promise 對象作為參數。這時，Action Creator 有兩種寫法。具體因為不常用不介紹。

?