Deixe-me explicar o problema que enfrentei recentemente.

Eu tenho o aplicativo React.js + Flux:

Existe umexibição de lista de artigos (NOTA: existem várias listas diferentes no aplicativo) e artigosvista de detalhes dentro dele.Mas há apenas um ponto de extremidade da API por cada lista que retorna uma matriz de artigos.Para exibir os detalhes, precisofind artigo por id na matriz. Isso funciona muito bem. Eu aciono uma ação que faz uma solicitação ao servidor e propaga o armazenamento com dados; quando eu vou para a tela de detalhes, apenas recebo o artigo necessário desse array na loja.Quando o usuário acessa a visualização de detalhes do artigo antes da lista (as lojas estão vazias), preciso fazer uma solicitação.O fluxo se parece com: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

O componente pode ter a seguinte aparência:

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

A parte interessante vem a seguir:

Agora, preciso fazer outra solicitação ao servidor, mas as opções de solicitação dependem dos detalhes do artigo. É por isso que preciso fazer o segundo pedido após o primeiro na exibição de detalhes.Eu tentei várias abordagens, mas todas parecem feias. Não gosto de chamar ações de lojas que tornam as lojas muito complicadas. Chamar ação dentro de ação neste caso não funciona bem porque precisarei encontrar um artigo da loja dentro dessa ação.Solução (?!)

O que eu inventei é usar o retorno de chamada em ação dentro do componente e parece muito mais limpo:

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

Qual é a sua opinião?