Reducer生成用のnpmモジュールを公開してみた

Reduxの嫌なところは、その巨大なswitch文だ。短い関数ならいいのだけど、アプリケーションが大きくなってくると、巨大なswitch文に目も当てられなくなる。
以下が、既存のreducerのサンプルコード

import * as types from '../constants/ActionTypes';
const initialState = {
  count: 0
};

export default (state = initialState, actions) => {
  switch (actions.type) {
    case: types.INCREMENT:
      return Object.assign({}, state, { count: state.count + 1 });
    case: types.DECREMENT:
      return Object.assign({}, state, { count: state.count - 1 });
    default:
      return state;
  }
}

そこで今回、switch文ではなく、クラスベースで動的にcase文を追加して最終的にreducerを生成するためのnpmモジュール、redux-action-handlerを作成し、npmに公開してみた。
ただ、reduxの理念として純粋な関数を使いましょうという考え方があるので、あまり需要はないかもしれない。


使い方

redux-action-handlerをインストール

$ npm install redux-action-handler --save

npm install後は、Webpackなどを利用してimportすれば利用可能。
addCaseメソッドでswitch文にcaseを記述するイメージ。最終的にcreateメソッドでreducerを生成する。

import * as types from '../constants/ActionTypes';
import ActionHandler from 'redux-action-handler';

const initialState = {
  count: 0
};

const handler = new ActionHandler(initialState);

handler.addCase(types.INCREMENT, (state, action) => {
  return Object.assign({}, state, { count: state.count + 1 });
});

handler.addCase(types.DECREMENT, (state, action) => {
  return Object.assign({}, state, { count: state.count - 1 });
});

export default handler.create();

Home