javascript - Flux + React.js - Action 中的回调是好是坏？

Question

让我解释一下我最近遇到的问题。

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

• 里面有文章的 ListView (注意:应用程序中有多个不同的列表)和文章详细信息 View 。
• 但是每个列表只有一个返回文章数组的 API 端点。
• 为了显示详细信息，我需要按数组中的 id 查找文章。效果很好。我触发向服务器发出请求并使用数据传播存储的操作，当我转到详细信息屏幕时，我只是从存储中的数组中获取必要的文章。
• 当用户登陆列表前的文章详细信息 View (商店是空的)时，我需要发出请求。
• 流程如下:用户加载详细信息 View -> 组件已挂载 -> stores are empty -> rendered empty -> fetchArticles 操作被触发 -> 请求响应为 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} />;
     }
  });
  

接下来是有趣的部分:

• 现在我需要向服务器发出另一个请求，但请求选项取决于文章的详细信息。这就是为什么我需要在详细信息 View 中的第一个请求之后发出第二个请求。
• 我尝试了几种方法，但它们看起来都很丑。我不喜欢从让商店变得过于复杂的商店调用操作。在这种情况下，在操作内调用操作效果不佳，因为我需要在该操作内从商店中查找文章。

解决方案(？!)

• 我想到的是在组件内部使用回调，感觉更简洁:

  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} />;
     }
  });
  

你有什么意见？

Answer 1

考虑将获取详细文章的第二次调用移至 ArticleDetails 组件的 componentDidMount() 生命周期方法。

因此，如果没有设置文章，则完全不要通过返回 null/false 来呈现 ArticleDetails 组件。