Dispatcher, Actions, Constantsのファイル分割粒度とReduceStoreでの注意点

f:id:varmil:20160826081831p:plain

Dispatcher

  • アプリケーション全体で単一のインスタンスで良いのではないか。ファイル分割の必要は特に無いと思う。
  • ただしその場合、生きている全てのStoreが全てのdispatch()を拾うので、下記のようにdefault:でいらないイベントはスルーする必要がある。同一stateをreturnした場合、無駄にre-renderは走らないので特に問題ないという判断だ。
 reduce(state, action) {
        switch (action.type) {
            case AuthConstants.FETCH_MEMBER_STATE:
                return {
                    isPrepared: action.value,
                    isLoggedIn: action.value,
                    isPremium: false,
                };
            default:
                console.info('Not match any actions', state, action);
                return state;
        }
    }
  • しかしfacebookの例では下記のようにドメインごとにdispatcherを分けるようなイメージで作っている。
import type {Action} from './TodoActions';
const instance: Dispatcher<Action> = new Dispatcher();

Actions, Constants

  • 小規模なアプリだったら Actions Constants もそれぞれ単一のファイル(あるいはかなり大きめのドメイン粒度でファイル分割する)に纏めてしまったほうが分かりやすいと思った。理由はそこまでActionの種類は多くないから。せいぜい数十〜百以内には収まるだろうし。
  • ドメインの区別はactionTypeの命名でカバーする感じ。例えば下記のようにTODO_とついていれば「ああ、これはTODOドメインに関するActions Constants なんだなぁ」とわかるだろうし。
Actions

  create: function(text) {
    AppDispatcher.dispatch({
      actionType: AppConstants.TODO_CREATE,
      text: text
    });
  },

  updateText: function(id, text) {
    AppDispatcher.dispatch({
      actionType: AppConstants.TODO_UPDATE_TEXT,
      id: id,
      text: text
    });
    .....
Constants

module.exports = keyMirror({
  TODO_CREATE: null,
  TODO_COMPLETE: null,
  .....
  TODO_UPDATE_TEXT: null
});