Reduxのアクションを綺麗に書く方法の提案

皆さん

Redux使ってますかー！

使ってますよー！

でも疲れますよねー！

アクションの定義とかー！

リデューサーの定義とかー！

アクションクリエイターの定義とかー！

そもそもアクションを定数で定義するのってどうなんですかー！

いっぱい定義したらどこかで同じ文字列書いちゃいませんかー！

そんなときー！

次のソースコードをコピって使いましょー！

export default class ActionSchema {

  constructor(...props) {
    Object.assign(this, {
      ...props,
    });
  }

  static get actionType() {
    return this.name;
  }

  static action(props) {
    return {
      type: this.name,
      ...props,
    };
  }
}

これを使うとー！

アクションが次のように書けますー！

export class CreateMessage extends ActionSchema {}
export class DeleteMessage extends ActionSchema {}

アクションクリエイターが次のように書けますー！

import { CreateMessage, DeleteMessage } from './schema';

export function createMessage({messageType, content}) {
  const message = {
    type: messageType,
    content,
  }
  return dispatch => {
    dispatch(CreateMessage.action({message}));
    setTimeout(function () {
      dispatch(DeleteMessage.action({message}));
    }, 10000);
  };
}

リデューサーが次のように書けますー！

import { CreateMessage, DeleteMessage } from '../actions/schema';

export default function messages(state = [], { type, ...rest }) {
  switch (type) {
    case CreateMessage.actionType:
      ...

    case DeleteMessage.actionType:
      ...

    default:
      return state;
  }
}

ね、便利でしょう？

※この記事は往年のテキストサイトを意識して書かれました