Redux-Trampoline書いてみた #JavaScript

redux-thunk

redux-thunkとは！
functionをdispatchしたら実行してくれる。
それだけのことでAction Creatorであらゆるビジネスロジックを扱える気がするんだ。

redux-thunkのソースコード

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;

たった14行。extraArgumentの対応を除けばもっと短い。

こういうことでしょ？

export default ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }

  return next(action);
};

再帰呼び出しのtrampoline

https://qiita.com/41semicolon/items/985bdd2f551d9392463c
こちらの記事を参考にしました。

trampoline

function trampoline (fn) {
  return (...args) => {
    let result = fn(...args);
    while (typeof result === 'function') {
      result = result();
    }
    return result;
  };
}

あれ、これって……なんかさっき見たような。

redux-trampoline

てな訳で書いてみました。

redux-trampoline/index.js

export default ({ dispatch, getState }) => next => action => {
  while (typeof action === 'function') {
    action = action(dispatch, getState);
  }

  return next(action);
};

使ってみる

カウントダウンの例は例の記事から拝借しました。

actions/index.js

export const LOG_COUNT = 'LOG_COUNT';

export const countDown = num => dispatch => {
  if (num === 1) {
    return { type: LOG_COUNT, num };
  }
  if (num % 1000 === 0) {
    // 渡されたdispatchを使うと途中経過も送れる
    dispatch({ type: LOG_COUNT, num });
  }

  return countDown(num - 1);
};

reducers/index.js

const result = (state = null, action) => {
  // actionTypeを省略する横着
  return action.num;
};

export default result;

index.js

import { createStore, applyMiddleware } from 'redux';
import trampoline from './redux-trampoline';
import result from './reducers';
import { countDown } from './actions';

const store = createStore(result, applyMiddleware(trampoline));
const unsubscribe = store.subscribe(() => console.log(store.getState()));

store.dispatch(countDown(30000));

unsubscribe();

実行結果

result

applyMiddlewareについて

Reduxのチュートリアル本当に素晴らしいんだ。
https://redux.js.org/api/applymiddleware