9

私は React/Flux で遊んでいますが、許可に敏感なアクションを処理するための「Flux Way」に頭を悩ませています。

包括的な質問: ログインしていない訪問者がログインを必要とするアクションを試みた場合、(a) ユーザーがログインしているかどうかを確認する、(b) ログインフローを開始する、(c) の Flux の方法は何ですか? ) 成功したらアクションを終了しますか?

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

コメント フォーム コンポーネント (ほとんどは 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()方法のケースであるということでした。ただし、上記の実装は、設定されるとすぐに (戻るとすぐに)waitFor依存ループを閉じるため、失敗します。SessionStore.dispatchTokenensureCurrentUser

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

前もって感謝します ：）

4

3 に答える 3

7

FakeRainBrigand が彼の回答で示唆したように、最初に SessionStore からその値を取得して、コメントを作成する前に、ユーザーが有効なセッションを持っていることを確認する必要があります。

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

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

于 2014-10-12T20:42:57.837 に答える
3

react-router レポにauth-flowと呼ばれる例があり、これがどのように行われるかを明らかにしていることに注意してください。ただし、私はまだそれを機能させようとしていますが、ここに追加すると便利です。

于 2014-10-19T14:07:59.070 に答える
3

最も簡単なのは、セッションがあるかどうかを SessionStore に尋ねることです。

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

もちろん、これはサーバー リクエストを節約するだけです。この動作は、常に を呼び出すのと同じであるべきcreateComment(action.data)です。

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

このために、「ログイン」イベントを発行するイベント エミッターが必要になる場合があります。 

 case CommentConstants.ADD_COMMENT:
    if (SessionStore.getUser()) {
       createComment(action.data);
    }
    else {
       someEventEmitter.one('login', function(){
           createComment(action.data);
       });
       someEventEmitter.emit('loginRequired');
    }
    break;

また、loginRequired が発行されたときに、ログインしているユーザーがいない場合は、ログイン ビューが表示されます。

于 2014-10-12T19:55:49.807 に答える