Flux + React.js - 动作中的回调是好还是坏？ [英] Flux + React.js - Callback in actions is good or bad?

问题描述

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

Let me explain the problem that I've faced recently.

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

I have React.js + Flux powered application:

• 有一个文章的列表视图（注意：应用中有多个不同的列表）和文章详细信息视图。


• 但每个列表只有一个API端点返回文章数组。


• 为了显示我需要的详细信息在数组中按ID查找文章。这很好用。我触发向服务器发出请求并使用数据传播商店的操作，当我转到详细信息屏幕时，我只是从存储中的该数组中获取必要的文章。


• 当用户登陆文章详细信息时在列表前查看（商店为空）然后我需要提出请求。


• Flow看起来像：用户加载详细信息视图 - > 组件已挂载 - > 商店为空 - > 呈现为空 - > 触发fetchArticles操作 - > 请求回复是200 - > 商店现在有文章列表 - > 组件确实更新 - > 成功呈现数据



• 组件看起来如下：

• There is a list view of articles (NOTE: there are multiple of of different lists in the app) and article details view inside it.
• But there is only one API endpoint per each list which returns array of articles.
• In order to display the details I need to find article by id in array. That works pretty fine. I trigger action which makes request to server and propagates store with data, when I go to details screen then I just get the necessary article from that array in store.
• When user lands on article details view before list (stores are empty) then I need to make a request.
• Flow looks like: 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

• Component could look as follows:

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

接下来是有趣的部分：

• 现在我需要向服务器发出另一个请求，但请求选项取决于文章详细信息。这就是为什么我需要在详细信息视图中的第一个请求之后发出第二个请求。


• 我尝试了几种方法，但所有方法看起来都很难看。我不喜欢从商店那里调用让商店变得太复杂的行为。在这种情况下调用操作内部的操作不能很好地工作，因为我需要在该操作中找到商店中的文章。

• Now I need to make another request to server but request options depend on the article details. That's why I need to make second request after the first one on the details view.
• I've tried several approaches but all of them look ugly. I don't like calling actions from stores that makes stores too complicated. Calling action inside action in this case doesn't work well because I will need to find article from store inside that action.

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

• What I've came up with is to use callback in action inside component and it feels much more cleaner:

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

您的投入是什么？

推荐答案

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

Consider move the second call to get a detail article to the ArticleDetails component componentDidMount() life cycle method.

因此，如果没有设置文章，请不要通过返回null / false来渲染ArticleDetails组件。

So if the article is not set, do not render the ArticleDetails component at all by return null / false.

这篇关于Flux + React.js - 动作中的回调是好还是坏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！