Question

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

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

文章中有列表视图（注意：应用中有多个不同的列表），文章中包含详细信息视图。
但每个列表只有一个API端点返回文章数组。
为了在数组中按ID find文章显示我需要的详细信息。这很好用。我触发向服务器发出请求并使用数据传播存储的操作，当我转到详细信息屏幕时，我只是从存储中的该数组中获取必要的文章。
当用户在列表（商店为空）之前登陆文章详情视图时，我需要提出请求。
流程如下：User loads details view - ＆gt; component did mount - ＆gt; stores are empty - ＆gt; rendered empty - ＆gt; fetchArticles action is triggered - ＆gt; request response is 200 - ＆gt; stores now have list of articles - ＆gt; component did update - ＆gt; 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（）生命周期方法的详细文章。

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

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

解决方案（？！）

1 个答案: