Authentication 反应流量：如何在验证后触发一次性初始负载

我使用一个高阶包装组件作为根，它完成了两件事：

验证身份验证（重定向到登录或主页）

完成身份验证后，执行初始加载以存储

我发现在这个单包装类中很难做到这两件事，因为如果用户没有经过身份验证（没有现有会话），我无法找到一种方法来执行一次性初始加载触发器

例如，当有一个带有回调的会话时，我会触发一个加载：

componentWillMount: function() {
    LoginStore.addChangeListener(this._onChange);
    var authData = AuthAPIUtils.checkForSession();
    if(authData !== null)  {
       WebAPIUtils.loadStores(this.onBootstrapComplete);
    }
},

“this.onBootstrapComplete”是一个将更改包装器状态的回调

onBootstrapComplete: function() {
    console.log("5-the final callback was made - onBootstrapComplete");
    //localStorage.setItem( 'gvLoggedIn', true ); This is set true in home
    this.setState({
        bootstrapComplete: true,
    });
  },

“this.state.bootstrapComplete”传递给子组件，以从加载微调器切换到呈现组件

render: function(){
    if(this.state.loggedIn) {
        var childrenWithProps = React.Children.map(this.props.children,function(child) { 
        return React.cloneElement(child,{bootstrapComplete : this.state.bootstrapComplete}) 
        },this);

        return (
            <div className="wrapper-container">
                {childrenWithProps} 
            </div>
        )
    }
    else {
        return ( 
            <div className="wrapper-container">
                <Login />
            </div>
        ) 
     }

render:function（）{
if（this.state.loggedIn）{
var childrenWithProps=React.Children.map（this.props.Children，function（child）{
返回React.cloneElement（子级，{bootstrapComplete:this.state.bootstrapComplete}）
}，这个）；
返回(
{childrenWithProps}
)
}
否则{
报税表（
) 
}

但是，当没有会话时，这个一次性触发器的回调解决方案就会崩溃

我努力寻找解决方案，我想出的最好办法是：

包装器只能侦听“LoginStore”，该“LoginStore”在登录和注销时只会触发一次，然后使用_onChange检查登录并触发加载

在包装器类中创建一个处理程序，并将其作为回调传递给登录类

---

也许这些解决方案中的一个很好（如果有的话请告诉我），但我想确保我没有做一些根本不好的事情来引导我的应用程序。

对我来说，这似乎是一个好方法。也许有一点，AuthAPIUtils应该是一个动作文件（但可能已经是了）并管理调度。阅读您的代码，我认为您已经在以这种方式使用它。否则，我认为您的方法

1.包装器只能侦听“LoginStore”，该“LoginStore”应在登录和注销时仅触发一次，然后使用_onChange检查登录并触发加载。 2.在包装类中创建一个处理程序，并将其作为回调传递给登录类

很好