通量:异步操作成功时的编程转换

Flux: programatic transition on async operation success

本文关键字：编程 转换 成功 异步操作 通量      更新时间：2023-09-26

我的通量工作流程是由于这篇文章而制定的。

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

SignIn视图调用调用SomeService AppActionCreators#signIn。所有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操作 + 显示/隐藏登录/索引视图与传递转换回调？

触发操作似乎比回调机制更"不稳定"，我会这样做。我认为在登录后应用程序的状态发生变化的情况下，通过触发操作，您将允许存储适当地更改状态，这将更有意义。

例如，设置已登录的用户名/显示图片。响应中将有该值，通过调度登录成功操作，存储将采用这些值，并在存储中设置应用程序状态的 SignedInUserName 属性，然后发出该更改。

我对 React-Router 不是很熟悉，也不确定您将如何处理状态更改。

相关文章：