1

したがって、flux アーキテクチャでは、データは次のように流れます。

View -> Action -> Dispatcher -> Store
 ^ <-----------------------------|

ビューがコメント ボックスであるとしましょう。ユーザーがコメントを送信すると、addComment アクションがトリガーされますが、そのコメントはサーバーのどこに送信されるのでしょうか? 発送する前にアクション関数で発生する必要がありますか、それともディスパッチャからアクションを受け取ったときにストアが行う必要がありますか?

どちらのケースも、単一責任パターンに違反しているように見えます。それとも、1 つの LocalCommentStore と ServerCommentStore の 2 つの CommentStore が存在し、どちらも addComment アクションを処理する必要がありますか?

4

2 に答える 2

6

あなたの場合、アクションは、保留中のアクションまたは楽観的な更新をストアに送信することと、WebAPI に呼び出しを送信することの両方を担当します。

View -> Action -> Pending Action or optimistic update  -> Dispatcher -> Store -> emitEvent -> View 
               -> WebUtils.callAPI()

onWebAPISuccess -> Dispatcher -> Store -> emitEvent -> View
onWebAPIFail -> Dispatcher -> Store -> emitEvent -> View
于 2014-11-08T12:26:54.237 に答える
4

これは素晴らしい質問です。これが私のやり方です。

API 用のモジュールを作成します。そのモジュールを actions.js にインポートしてから、API レスポンスをストアにディスパッチします。これは、アプリケーションで API 呼び出しを使用したスト​​アがどのように見えるかの例 (fluxxor を使用) です。

# actions.js
var MyAPI = require('./my-api'),
    Constants = require('./constants/action-constants');

module.exports = {
    doSomeCrazyStuff: function(stuff, userID) {
        MyAPI.doSomeCrazyStuff(stuff, userID)
             .success(function(resp) {
                 this.dispatch(Constants.DO_CRAZY_STUFF_SUCCESS, {stuff: resp.stuff});
                 if (resp.first_stuff_did) {
                     this.dispatch(Constants.SHOW_WELCOME_MESSAGE, {msg: resp.msg});
                 }
             })
             .error(function(e) {
                 this.dispatch(Constants.DO_CRAZY_STUFF_ERROR, {e: resp.error});
             });
    }
};

# store.js
var Fluxxor = require('fluxxor'),
    ActionConstants = require('./constants/action-constants');

var StuffStore = module.exports = {
    Fluxxor.createStore({
        initialize: function() {
            this._bindActions();
            this.stuff = null;
        },
        _bindActions: function() {
            this.bindActions(
                ActionConstants.DO_CRAZY_STUFF_SUCCESS, this.handleDoCrazyStuffSuccess
            );
        },
        handleDoCrazyStuffSuccess: function(payload) {
            this.stuff = payload.stuff;
            this.emit('change');
        }
   });
}

# stuff-component.js
var React = require('react'),
    Fluxxor = require('fluxxor'),
    FluxMixin = Fluxxor.FluxMixin(React),
    StoreWatchMixin = Fluxxor.storeWatchMixin;

var StuffComponent = module.exports = React.createClass(function() {
    mixins: [FluxMixin, StoreWatchMixin("StuffStore")],
    getStateFromFlux: function() {
        flux = this.getFlux();

        var StuffStore = flux.store("StuffStore").getState();

        return {
            stuff: StuffStore.stuff
        }
    },
    onClick: function() {
        this.getFlux().actions.doSomeCrazyStuff();
    },
    render: function() {
        return <div onClick={this.onClick}>{this.state.stuff}</div>
    }
});
于 2014-12-18T07:33:28.070 に答える