Javascript 通量+；React.js-操作中的回调是好还是坏？

让我解释一下我最近面临的问题

我有React.js+Flux驱动的应用程序：

• 有一个文章列表视图（注意：应用程序中有多个不同的列表）和文章详细视图
• 但每个列表中只有一个API端点返回文章数组
• 为了显示详细信息，我需要在数组中按id查找文章。那很好用。我触发向服务器发出请求并用数据传播存储的操作，当我转到详细信息屏幕时，我只是从存储中的数组中获取必要的文章
• 当用户登录到列表之前的article details视图（存储为空）时，我需要发出请求
• 流程看起来像：

  用户加载详细信息视图

  ->

  组件确实装载了

  ->

  存储是空的

  ->

  呈现为空的

  ->

  获取文章操作被触发

  ->

  请求响应是200

  ->

  存储现在有文章列表

  组件确实更新了
  ->
  使用数据成功渲染

• 组件可以如下所示：

  let DetailsComponent = React.createClass({
     _getStateFromStores() {
         let { articleId } = this.getParams();
         return {
             article: ArticleStore.getArticle(articleId)
         };
     },
  
     componentDidMount() {
         // fire only if user wasn't on the list before
         // stores are empty
         if (!this.state.article) {
            ArticleActions.fetchArticles('listType');
         }
     },
  
     render() {
        return <ArticleDetails article={this.state.article} />;
     }
  });
  

  让DetailsComponent=React.createClass({
  _getStateFromStores（）{
  设{articleId}=this.getParams（）；
  返回{
  文章：ArticleStore.getArticle（articleId）
  };
  },
  componentDidMount（）{
  //仅当用户以前不在列表中时激发
  //商店空无一人
  如果（！this.state.article）{
  ArticleActions.fetchArticles（'listType'）；
  }
  },
  render（）{
  返回；
  }
  });
  

接下来是有趣的部分：

• 现在我需要向服务器发出另一个请求，但请求选项取决于文章的详细信息。这就是为什么我需要在details视图上的第一个请求之后再提出第二个请求
• 我试过几种方法，但都很难看。我不喜欢从商店中调用使商店过于复杂的操作。在这种情况下，在action内部调用action不起作用，因为我需要从该action内部的存储中查找文章

溶液（？）

• 我想到的是在组件内部使用回调，它感觉更干净：

  let DetailsComponent = React.createClass({
     _getStateFromStores() {
         let { articleId } = this.getParams();
         return {
             article: ArticleStore.getArticle(articleId)
         };
     },
  
     componentDidMount() {
         if (!this.state.article) {
            ArticleActions.fetchArticles('listType', () => {
                this._requestAdditionalData();
            });
         }
         this._requestAdditionalData();
     },
  
     _requestAdditionalData() {
         if (this.state.article) {
            ArticleActions.fetchAdditional(this.state.article.property);
         }
     },
  
     render() {
        return <ArticleDetails article={this.state.article} />;
     }
  });
  

  让DetailsComponent=React.createClass({
  _getStateFromStores（）{
  设{articleId}=this.getParams（）；
  返回{
  文章：ArticleStore.getArticle（articleId）
  };
  },
  componentDidMount（）{
  如果（！this.state.article）{
  ArticleActions.fetchArticles（'listType'，（）=>{
  这是._requestAdditionalData（）；
  });
  }
  这是._requestAdditionalData（）；
  },
  _requestAdditionalData（）{
  如果（本.州.条）{
  ArticleActions.fetchAdditional（this.state.article.property）；
  }
  },
  render（）{
  返回；
  }
  });
  

---

您的输入是什么？

考虑将第二个调用移动到ArticleDetails组件componentDidMount（）生命周期方法以获取详细文章

---

因此，如果文章未设置，则根本不要通过返回null/false来呈现ArticleDetails组件。

这不是一个真正的答案，但是如果您总是连续调用两次，是否有方法将它们批处理为一次？例如，始终在原始获取中包含附加属性？此代码是演示性的，实际上它更复杂，批处理在这里不起作用。我同意你的看法。我想到了这样的想法，但最快的解决办法是使用回调。