javascript - Flux:异步操作成功时的编程转换

Question

我的助焊剂工作流程到期 this article .

SignInView ===> AppActionCreators ===> SomeService  
                      |                   ||
                   Promise <============= ||              
                     ||
                     || ======================> SIGN_IN_SUCCESS

SignIn View 调用 AppActionCreators#signIn，后者调用 SomeService。所有 SomeService 方法都会返回 Promise，因此 AppActionCreators 会在 Promise 解决后触发操作。

问题:在 singIn 成功时以编程方式转换到 IndexView 的真正方法是什么？请看一下代码:

AppActionCreators.js:

AppActionCreators = {
    signIn(username, password, signInCb) {
        SomeService.signIn(username, password).then(response => {
            //QUESTION: trigger action and make transition in Store or pass `signInCb` from `SignIn` view?
            AppDispatcher.dispatch({type: ActionTypes.SIGN_IN_SUCCESS, response});
            //Or?
            signInCb();
        });
    }
}

SignIn.react.js

class SignIn extends Component, Router.Navigation {
    handleSubmit(){
        const signInCb = () => this.transitionTo('index', {this.state.data})
        AppActionCreators.signIn(this.state.user,  this.state.password, signInCb);
    }
}

<小时/>

更新:问题的改写版本:使用SIGN_IN_SUCCESS操作+显示/隐藏登录/索引 View 与传递转换回调？

Answer 1

触发操作似乎比回调机制更“灵活”，我会同意。我认为在登录后应用程序状态发生变化的情况下更有意义，并且通过触发操作，您将允许商店适本地更改状态。

例如设置登录用户名/显示图片。您将在响应中看到这一点，并通过调度 SignInSuccess 操作，存储将获取这些值并在存储中设置应用程序状态的 SignedInUserName 属性，然后发出该更改。

我对 React-Router 不太熟悉，并且不确定你将如何处理状态更改。