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

Question

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

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

有文章的列表视图（注意：应用程序中有多个不同的列表）和文章详情视图在里面。
但是每个 returns 文章数组的每个列表只有一个 API 端点。
为了显示详细信息，我需要 find array by id 文章。效果很好。我触发向服务器发出请求并使用数据传播存储的操作，当我转到详细信息屏幕时，我只从存储中的数组中获取必要的文章。
当用户登陆列表前的文章详细信息视图（商店是空的）时，我需要发出请求。
流程如下：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 -> rendered with data successfully

组件可能如下所示：

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

接下来是有趣的部分：

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

解决方案 (?!)

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

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

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

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

Flux + React.js - Callback in actions is good or bad?

javascript

reactjs

reactjs-flux

react-jsx

解决方案 (?!)