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

  • 9
    いいね
  • 0
    コメント

皆さん






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;
  }
}






ね、便利でしょう?






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