公式
作者による解説
reduxのmiddlewareとは?
dispatchをmiddlewareでwrapする機能
middleware
let middleware = ({dispatch, getState}) => {
return (next) => {
return (action) => {
next(action)
};
};
};
reduxのapplyMiddlewareを使うことで、次のmiddleware(=next)を呼び出してactionを与えていきます。
redux-thunk
actionに関数を与えることを可能にして、任意の処理を実行できるようにするmiddleware
中身
非常に短くて簡潔なコードです
redux-thunk
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
nextは他にmiddlewareがない場合、store.dispatch
となります。
つまり、store.dispatch
が無視され、actionで指定した任意の関数が実行されます。
見た感じ、middlewareの最初に置かないとnextでの連鎖が止まる気がするな・・?
reduxのmiddlewareはLIFOなので気をつける
https://github.com/fbsamples/f8app/blob/master/js/store/configureStore.js#L45
ここを見ると間違いなさそう。気をつけよう。
https://github.com/reactjs/redux/blob/master/examples/real-world/src/actions/index.js#L19
このようなactionを渡したい時に有用。
actionはfunction(dispatch, getState, extraArgument)
の形でなければならない。
これで公式の例題を読んで理解できるようになりました。