title: At what nesting level should components read entities from Stores in Flux?
body: <p>I'm rewriting my app to use Flux and I have an issue with retrieving data from Stores. I have a lot of components, and they nest a lot. Some of them are large (<code>Article</code>), some are small and simple (<code>UserAvatar</code>, <code>UserLink</code>).</p>
  <p>I've been struggling with where in component hierarchy I should read data from Stores.<br />
  I tried two extreme approaches, neither of which I quite liked:</p>
  <h2>All entity components read their own data</h2>
  <p>Each component that needs some data from Store receives just entity ID and retrieves entity on its own.<br />
  For example, <code>Article</code> is passed <code>articleId</code>, <code>UserAvatar</code> and <code>UserLink</code> are passed <code>userId</code>.</p>
  <p>This approach has several significant downsides (discussed under code sample).</p>
  <pre><code>var Article = React.createClass({
    mixins: [createStoreMixin(ArticleStore)],
  
    propTypes: {
      articleId: PropTypes.number.isRequired
    },
  
    getStateFromStores() {
      return {
        article: ArticleStore.get(this.props.articleId);
      }
    },
  
    render() {
      var article = this.state.article,
          userId = article.userId;
  
      return (
        &lt;div&gt;
          &lt;UserLink userId={userId}&gt;
            &lt;UserAvatar userId={userId} /&gt;
          &lt;/UserLink&gt;
  
          &lt;h1&gt;{article.title}&lt;/h1&gt;
          &lt;p&gt;{article.text}&lt;/p&gt;
  
          &lt;p&gt;Read more by &lt;UserLink userId={userId} /&gt;.&lt;/p&gt;
        &lt;/div&gt;
      )
    }
  });
  
  var UserAvatar = React.createClass({
    mixins: [createStoreMixin(UserStore)],
  
    propTypes: {
      userId: PropTypes.number.isRequired
    },
  
    getStateFromStores() {
      return {
        user: UserStore.get(this.props.userId);
      }
    },
  
    render() {
      var user = this.state.user;
  
      return (
        &lt;img src={user.thumbnailUrl} /&gt;
      )
    }
  });
  
  var UserLink = React.createClass({
    mixins: [createStoreMixin(UserStore)],
  
    propTypes: {
      userId: PropTypes.number.isRequired
    },
  
    getStateFromStores() {
      return {
        user: UserStore.get(this.props.userId);
      }
    },
  
    render() {
      var user = this.state.user;
  
      return (
        &lt;Link to='user' params={{ userId: this.props.userId }}&gt;
          {this.props.children || user.name}
        &lt;/Link&gt;
      )
    }
  });
  </code></pre>
  <p>Downsides of this approach:</p>
  <ul>
  <li>It's frustrating to have 100s components potentially subscribing to Stores;</li>
  <li>It's <strong>hard to keep track of how data is updated and in what order</strong> because each component retrieves its data independently;</li>
  <li>Even though you might <em>already</em> have an entity in state, you are forced to pass its ID to children, who will retrieve it again (or else break the consistency).</li>
  </ul>
  <h2>All data is read once at the top level and passed down to components</h2>
  <p>When I was tired of tracking down bugs, I tried to put all data retrieving at the top level. This, however, proved impossible because for some entities I have several levels of nesting.</p>
  <p>For example:</p>
  <ul>
  <li>A <code>Category</code> contains <code>UserAvatar</code>s of people who contribute to that category;</li>
  <li>An <code>Article</code> may have several <code>Category</code>s.</li>
  </ul>
  <p>Therefore if I wanted to retrieve all data from Stores at the level of an <code>Article</code>, I would need to:</p>
  <ul>
  <li>Retrieve article from <code>ArticleStore</code>;</li>
  <li>Retrieve all article's categories from <code>CategoryStore</code>;</li>
  <li>Separately retrieve each category's contributors from <code>UserStore</code>;</li>
  <li>Somehow pass all that data down to components.</li>
  </ul>
  <p>Even more frustratingly, whenever I need a deeply nested entity, I would need to add code to each level of nesting to additionally pass it down.</p>
  <h2>Summing Up</h2>
  <p>Both approaches seem flawed. How do I solve this problem most elegantly?</p>
  <p>My objectives:</p>
  <ul>
  <li><p>Stores shouldn't have an insane number of subscribers. It's stupid for each <code>UserLink</code> to listen to <code>UserStore</code> if parent components already do that.</p>
  </li>
  <li><p>If parent component has retrieved some object from store (e.g. <code>user</code>), I don't want any nested components to have to fetch it again. I should be able to pass it via props.</p>
  </li>
  <li><p>I shouldn't have to fetch all entities (including relationships) at the top level because it would complicate adding or removing relationships. I don't want to introduce new props at all nesting levels each time a nested entity gets a new relationship (e.g. category gets a <code>curator</code>).</p>
  </li>
  </ul>