問題

私はReact/Fluxで遊んでいましたが、permission-designereアクションを処理するために 'Flux Way'の周りに頭をラップするのに問題があります。

重要な質問: ログインしていない訪問者がログインする必要のあるアクションを試みると、Fluxの方法は何ですか(a)ユーザーがログインしているかどうかをチェックし、(b)ログインフローを開始し、(c)成功時にアクションを終了しますか?

ユーザーが投稿するためにログインする必要があるフォーラムアプリの例を考えてみましょう:

コメントフォームコンポーネント(主にFBのReact tutから取得)があります。

 var CommentForm = React.createClass({
  handleSubmit: function ( e ) {
    e.preventDefault();

    // get data
    commentData = {
      content: this.refs.content.getDOMNode().value.trim()
    };

    this.props.onCommentSubmit( commentData );
    this.resetForm();
  },

  resetForm: function () {
    this.refs.content.getDOMNode().value = '';
  },

  render: function () {
    return (
      <form className="comment-form" id="comment-form" onSubmit={ this.handleSubmit }>
        <textarea name="comment[content]" placeholder="What's on your mind?" ref="content"></textarea>
        <button className="post-comment button" type="submit">Post</button>  
      </form>
    )
  }
});
 

コメントストア(省略形)

 var CHANGE_EVENT = 'change';
var _comments = {};

function createComment ( data ) {
  // post to server
}

var CommentStore = React.addons.update(EventEmitter.prototype, {$merge: {

  // omitted methods

  dispatcherIndex: AppDispatcher.register(function(payload) {
    var action = payload.action;
    var text;

    switch(action.actionType) {
      case CommentConstants.ADD_COMMENT:
        AppDispatcher.waitFor([SessionStore.dispatchToken])
        createComment(action.data);
        break;
    }

    return true;
  })
}});
 

セッションを処理するためのストア(省略形):

 var CHANGE_EVENT = 'change';

function ensureCurrentUser () {
  if ( !SessionStore.currentUser() ) {
    app.router.navigate('/login');
  }
}

var SessionStore = React.addons.update(EventEmitter.prototype, {$merge: {

  // omitted code

  currentUser: function () {
    return app.context.current_user;
  },

  dispatchToken: AppDispatcher.register(function ( payload ) {
    var action = payload.action;

    switch(action.actionType) {
      case CommentConstants.ADD_COMMENT:
        ensureCurrentUser();
        break;
    }

    return true;
  })
}});
 

私の最初の考えは、これがFluxのwaitFor()メソッドの場合であるということでした。しかし、waitForSessionStore.dispatchTokenが設定されるとすぐに依存関係ループを閉じるので、上記の実装は失敗します(ensureCurrentUserが返るとすぐに)。

これは、ペイロードをensureCurrentUserに渡し、次に/loginのルートハンドラに渡す必要がある場合ですか?これらのタイプのフローを処理するFluxの方法は何ですか?

前もって感謝します :)

  ベストアンサー

FakeRainBrigandが彼の答えで提案したように、SessionStoreからその値を最初に取得してコメントを作成する前に、ユーザーが有効なセッションを持っていることを確認するだけです。

 case CommentConstants.ADD_COMMENT:
  if (SessionStore.getUser()) {
   createComment(action.data);
  }
  break;
 

しかし、ユーザーがログインした後に作成されるようにコメントを保持するために、CommentStoreに保留中のコメントのコレクションを作成し、後でログイン検証とセッション作成のコールバックで、ユーザーが現在ログインしていることをCommentStoreに通知する新しいアクションをディスパッチします。次に、CommentStoreは保留中のものから実際のコメントを作

  同じタグがついた質問を見る

javascriptreactjsreactjs-flux