Question

My flux工作流程由this article生成。

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

SignIn视图会调用调用AppActionCreators#signIn的{{1}}。所有SomeService方法都返回promise，因此SomeService会在解析promise后触发操作。

问题：AppActionCreators成功过渡到IndexView的真正方法是什么？看看代码：

AppActionCreators.js：

singIn

SignIn.react.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();
        });
    }
}

更新：问题的重写版本：使用class SignIn extends Component, Router.Navigation { handleSubmit(){ const signInCb = () => this.transitionTo('index', {this.state.data}) AppActionCreators.signIn(this.state.user, this.state.password, signInCb); } }动作+显示/隐藏登录/索引视图与传递转换回调？

Answer 1

触发动作似乎比回调机制更“狡猾”，我会继续这样做。我认为在SignIn之后应用程序的状态发生变化并触发操作的情况下会更有意义，您可以允许存储适当地更改状态。

例如，设置signedIn用户名/显示图片。您可以在响应中通过Dispatching SignInSuccess操作，存储将获取这些值并在Store中设置应用程序状态的SignedInUserName属性，然后发出该更改。

我对React-Router不是很熟悉，也不确定你将如何处理状态变化。

Flux：异步操作成功的程序转换

1 个答案: