打造Redux中間件
簡單的
基本中間件：
const customMiddleware = store => next => action => {
if(action.type !== 'CUSTOM_ACT_TYPE') {
return next(action)
// 其他代碼
}
}
使用：
import {createStore, applyMiddleware} from 'redux';
import reducer from './reducer';
import customMiddleware from './customMiddleware';
const store = createStore(reducer, applyMiddleware(customMiddleware));
store => next => action =>看起來很復雜有木有?；旧夏闶窃趯懸粋€一層一層往外返回的方法，調用的時候是這樣的：
let dispatched = null;
let next = actionAttempt => dispatched = actionAttempt;
const dispatch = customMiddleware(store)(next);
dispatch({
type: 'custom',
value: 'test'
});
你做的只是串行化的函數調用，并在每次的調用上傳入適當的參數。當我第一次看到這個的時候，我也被這么長的函數調用串驚呆了。但是，在讀了編寫redux測試之后就理解是怎么回事了。
所以現在我們理解了函數調用串是怎么工作的了，我們來解釋一下這個中間件的第一行代碼：
if(action.type !== 'custom') {
return next(action);
}
應該有什么辦法可以區分什么action可以被中間件使用。在這個例子里，我們判斷action的type為非custom的時候就調用next方法，其他的會傳導到其他的中間件里知道reducer。
來點酷的
redux的官方指導里有幾個不錯的例子，我在這里詳細解釋一下。
我們有一個這樣的action：
dispatch({
type: 'ajax',
url: 'http://some-api.com',
method: 'POST',
body: state => ({
title: state.title,
description: state.description
}),
cb: response => console.log('finished', response)
})
我們要實現一個POST請求，然后調用cb這個回調方法?？雌饋硎沁@樣的:
import fetch from 'isomorphic-fetch'
const ajaxMiddleware = store => next => action => {
if(action.type !== 'ajax') return next(action);
fetch(action.url, {
method: action.method,
body: JSON.stringify(action.body(store.getState()))
}).then(response => response.json())
.then(json => action.cb(json))
}
非常的簡單。你可以在中間件里調用redux提供的每一個方法。如果我們要回調方法dispatch更多的action該如何處理呢？
.then(json => action.cb(json, store.dispatch))
只要修改上例的最后一行就可以搞定。
然后在回調方法定義里，我們可以這樣：
cb: (response, dispatch) => dispatch(newAction(response))
As you can see, middleware is very easy to write in redux. You can pass store state back to actions, and so much more. If you need any help or if I didn’t go into detail enough, feel free to leave a comment below!
如你所見，redux中間件非常容易實現。
