Fluxで複数アクションの同時発行はOKなのか

Question

状況

このような状況を想定しています。

• <input type="text">年というパーツと、<button>うるう年</button>というパーツがある。
• 決定ボタンは一つ上の要素が管理している(ほかにも月や日、曜日といったパーツがあり共通化したかった)
• <input>が編集されたら、逐一上の要素へ変更を通知したい(そうしないと決定ボタンが押されたとき困る)
• 決定がおされるか、うるう年が押されたらアラートを出したい。
• アラートは 「XX年」あるいは「うるう年」と表示させたい。

コード

とりあえずコードみてください。JavaScriptで Riot + RiotControlという構成です。

<my-form></my-form>

<my-form>
    <my-editor></my-editor><button onclick={finish}>決定</button><br>
    RESULT: {value}
    <script>
        this.on('mount', _ => riot.mount('my-editor', 'my-year-editor'));
        const action = new class Action {
            finish() {RiotControl.trigger('finish');}
        };
        const store = new class Store {
            constructor() {
                riot.observable(this);
                this.value = '';
                this.actionTypes = {
                    changed: 'store-changed'
                };
                this.on('edit', text => {
                    this.value = text;
                    this.trigger(this.actionTypes.changed);
                });
                this.on('finish', _ => alert(this.value));
            }
        }
        this.finish = _ => {
            action.finish();
        }
        this.value = store.value;
        RiotControl.addStore(store);
        store.on(store.actionTypes.changed, _ => {
            this.value = store.value;
            this.update();
        });
</my-form>

<my-year-editor>
    <input type="text" onkeyup={edit}>年 <button onclick={leap}>うるう年</button>
    <script>
        const action = new class Action{
            edit(text) {
                RiotControl.trigger('edit', text);
            }
            finish() {
                RiotControl.trigger('finish');
            }
        };
        this.edit = e => action.edit(e.target.value + '年');
        this.leap = _ => {
            // 以下が疑問のコード。editとfinishを発行している
            action.edit('うるう年'); // <my-form>内のstoreの値を変更する必要がある
            action.finish(); // うるう年ボタンは決定ボタンの役割も兼ねる
        }
</my-editor>

長文になってしまいすみません…回答していただけると嬉しいです

Answer 1

質問の本題としては、そういう組み方をしてOKなのか？ってことですか？
Fluxという概念に沿っているのか？ということが疑問なのでしょうか。

正直個人的にはプロジェクトがどのように動作したいかの方が重要だと思っているので、意図通りに動いていてかつほかに影響がなく、管理上問題なければなんでもいいと思います。

ただプロジェクトのルールとしてFluxと決めているなら想定されないデータフローはすべきではないかもしれません。

Comments

[pandanoir]

「こういう風にActionを同時に発行するのはFluxという概念に沿っているのか」が質問の本題です。

確かにデータフロー的に考えると一方通行ではなく枝分かれした構造になるわけなので、マズイような気がします…

枝分かれを解消するにはどうしたらいいでしょうか?あるいは枝分かれは解消する必要はないのでしょうか?

[NatsumiOki]

先の回答の通り個人的には別にいいじゃんって思いますが、Fluxの概念をどこまで厳密にするかによりますかね。

枝分かれといっても、
「うるう年ボタンを押したらアラートする」
「決定ボタンを押したらアラートする」
このデータフローは問題ないはずです。

「うるう年ボタンを押したらうるう年の設定を反映する」という部分のアクションが切り分けられていれば良いのではないでしょうか？

[pandanoir]

コードの重複にはなりますが、そうするのがやはりベターですかね…ありがとうございます