Reduxで利用する定数を楽に書く

January 5, 2017

Redux を使った実装をしていると、 action.typeを下記のように定数で宣言し、

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

reducers, actionsなどでは以下のようにimportする実装がよく書かれていると思うのですが
( Redux のドキュメントでもこのような実装だった )

import { ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER } from './actions'

宣言するaction.typeが増えた場合に、
定数の宣言に不自由さを感じたので、
定数を作るための関数を用意しました。

export function createConstants(...constants) {
  return constants.reduce((accumulator, constant) => {
    accumulator[constant] = constant;
    return accumulator;
  }, {});
}

定数の宣言はこの関数を使うと下記のようになります。

import { createConstants } from '../utils';

export default createConstants(
  'ADD_TODO',
  'TOGGLE_TODO',
  'SET_VISIBILITY_FILTER',
);

各reducers, actionsでは下記のようにimportすることで、シンプルに定数を扱うことができます。

import C from '../constans';

switch (action.type) {
  case C.ADD_TODO:
  ...
}

ちなみに、createConstants関数はeslint-confing-airbnbにあてると、 no-param-reassignで

Assignment to property of function parameter 'accumulator'

とerrorになるので、.eslintrcに下記を追加して、errorを避けています。

"rules": {
   "no-param-reassign": [2, {
     "props": false
   }]
 }