Question

我试图找出在我做请求时隐藏/显示加载指示器的最佳方法。

我有一个：

LoadingAction 发出一个事件来显示/隐藏加载指示符。
LoadingStore 以保存加载信息（显示/隐藏）。
loading.jsx ：加载指标组件。

我在＆＃34; flux方式＆＃34;：

尝试了不同的事情

好：在请求前调用LoadingAction.showLoading()，在响应到达时调用LoadingAction.hideLoading()。
错误：在调用操作（发出请求）的每个视图中调用LoadingAction.showLoading()，在商店调用回调时调用LoadingAction.hideLoading()。
丑陋：当我提出请求并收到请求时，我尝试使用LoadingStore方法直接更改setter（什么不是正确的解决方案......）响应。

但是，除了最后一次尝试（＆＃34;丑陋＆＃34;），我总是收到错误dispatch in the middle of a dispatch。

我知道这意味着什么，但我无法用另一种策略思考。

我不想使用setTimeout函数来解决此问题。这不是正确的解决方案。

谢谢！

Answer 1

过了一段时间，我们最终得到了here所描述的解决方案。这种方法与我最初的想法非常不同：每个组件都会关注加载，如下所示：

render: function(){
   // while loading
   if (!this.state.data){
     return <Loader/>
   }

   // loaded, you can use this.state.data here
   return <div>...</div>
}

但是，当API返回错误时，我们遇到了问题。在这种情况下，组件如何删除<Loader />？

好吧，每个组件都需要注册和监听（我们使用Flux）来自基于promise的HTTP客户端（Axios）的调度。像这样：

        componentDidMount: function(){
            LoaderStore.addChangeListenerEsconderLoading(this.stopLoading);
        },

        componentWillUnmount:function(){
            LoaderStore.removeChangeListenerEsconderLoading(this.stopLoading);
        },

这个（使用Axios）：

request(options)
  .then(function(response){
    success && success(response.data);
   })
   .catch(function (error) {
     LoaderAction.hideLoading();
  }

Flux和React：当我的应用程序发出请求时，如何显示加载指示器？好的，坏的和丑陋的尝试

1 个答案: