redux-thunkとは？

公式

作者による解説

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)の形でなければならない。
これで公式の例題を読んで理解できるようになりました。