Flux + React.js - 动作回调是好是坏？

Question

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

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

• 其中有一个列表视图文章（注意：应用中有多个不同的列表）和文章详情视图。
• 但每个列表只有一个返回文章数组的 API 端点。
• 为了显示细节我需要findarticle by id in array。这很好用。我触发了向服务器发出请求并使用数据传播存储的操作，当我转到详细信息屏幕时，我只需从存储中的该数组中获取必要的文章。
• 当用户登陆列表之前的文章详细信息视图（商店为空）时，我需要提出请求。
• 流程看起来像：User loads details view -> component did mount -> stores are empty -> rendered empty -> fetchArticles action is triggered -> request response is 200 -> stores now have list of articles -> component did update -> @987654303

• 组件可能如下所示：

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

接下来是有趣的部分：

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

解决方案（？！）

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

  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() 生命周期方法。

所以如果没有设置文章，则根本不渲染 ArticleDetails 组件，返回 null / false。