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

Question

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

I have React.js + Flux powered application:

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

The interesting part comes next:

• 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.

Solution (?!)

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

What's your input?

Answer 1

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

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