1.定義

中間件就是一個函數(shù)，對store.dispatch方法進行了改造，在發(fā)出 Action 和執(zhí)行 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 的原生方法，作用是將所有中間件組成一個數(shù)組，依次執(zhí)行。

4.異步操作的思路

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

以抓取數(shù)據為例，共有兩種寫法

// 寫法一：名稱相同，參數(shù)不同 { 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，觸發(fā) State 更新為"正在操作"狀態(tài)，View 重新渲染
• 操作結束后，再送出一個 Action，觸發(fā) State 更新為"操作結束"狀態(tài)，View 再一次重新渲染

5?redux-thunk 中間件

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

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

6.redux-promise中間件。

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

?

轉載于:https://www.cnblogs.com/lyxverycool/articles/6548541.html

總結

以上是生活随笔為你收集整理的redux中间件的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。