title: Flux - components calling store directly
body: <p>Having spent some time working with flux (both ‘vanilla' and with various frameworks including alt and fluxible) I am left with a question about best practice with regard to loading the initial state of components. More specifically about components directly accessing the store to do it.</p>
  
  <p>The flux ‘model’ prescribes a unidirectional flow of data from Action>Dispatcher>Store>View in a loop, yet it seems this convention is eschewed when loading the initial state of components, most docs/tutorials contain examples where rather than firing an action to get the data, the component calls a function on the store directly (examples below). </p>
  
  <p>It seems to me that components should have little/no information about the store, only about the actions that they can fire, so introducing this link seems both unintuitive and potentially dangerous as it may encourage future developers to jump straight to the store from the component instead of going via the dispatcher. It also runs counter to the ‘Law of Demeter’ which Flux is supposed to adhere very strongly to.</p>
  
  <p>What is best practice for this? Is there a reason that this always seems to be the case? Its quite possible that I have missed out something fundamental, so please let me know if so!</p>
  
  <p>Thanks.</p>
  
  <hr>
  
  <p><strong>Examples of components calling the store directly.</strong></p>
  
  <p>Flux React example from the fb flux repo example chat app (<a href="https://github.com/facebook/flux/tree/master/examples/flux-chat" rel="nofollow">https://github.com/facebook/flux/tree/master/examples/flux-chat</a>)</p>
  
  <p><strong>MessageSection.react.js</strong></p>
  
  <pre><code>getInitialState: function() {
      return getStateFromStores();
  },
  
  
  function getStateFromStores() {
      return {
          messages: MessageStore.getAllForCurrentThread(),
          thread: ThreadStore.getCurrent()
      };
  }
  </code></pre>
  
  <p>Another example from the same repo for the TODOapp
  (<a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc" rel="nofollow">https://github.com/facebook/flux/tree/master/examples/flux-todomvc</a>)</p>
  
  <p><strong>TodoApp.react.js</strong> </p>
  
  <pre><code>function getTodoState() {
      return {
          allTodos: TodoStore.getAll(),
          areAllComplete: TodoStore.areAllComplete()
      };
  }
  </code></pre>
  
  <p>Example of the alt implementation of the above todo app: (<a href="https://github.com/goatslacker/alt/tree/master/examples/todomvc" rel="nofollow">https://github.com/goatslacker/alt/tree/master/examples/todomvc</a>)</p>
  
  <p><strong>TodoApp.js</strong></p>
  
  <pre><code>function getTodoState() {
      return {
          allTodos: TodoStore.getState().todos,
          areAllComplete: TodoStore.areAllComplete()
      };
  }
  </code></pre>
  
  <p>and finally the alt specific tutorial:
  (<a href="https://github.com/goatslacker/alt-tutorial/blob/master/src/components/Locations.jsx" rel="nofollow">https://github.com/goatslacker/alt-tutorial/blob/master/src/components/Locations.jsx</a>)</p>
  
  <p><strong>Locations.js</strong></p>
  
  <pre><code>componentDidMount() {
      LocationStore.fetchLocations();
  },
  </code></pre>