title: React, Flux, State and Stores
body: <p>I find the example todo flux app to be a bit lacking so I'm trying to get my head round things by developing an application to learn and experiment.</p>
  
  <p>The application is a drag and drop fruit basket organiser. I have several baskets which can have various pieces of fruit dragged between them. You can highlight a piece of fruit by clicking on it and the last dragged item will remain highlighted.</p>
  
  <p>Based on this I have 3 stores:</p>
  
  <ul>
  <li>FruitStore</li>
  <li>BasketStore</li>
  <li>AppStateStore - To track last clicked and last dragged fruit</li>
  </ul>
  
  <p>When a user action occurs a FruitAction is dispatched and handled by either the AppStateStore if the fruit has been clicked or all stores if the fruit has been moved to another basket.</p>
  
  <p>The main AppView component listens to change events from both the FruitStore and the AppStateStore and re-renders.</p>
  
  <p>My questions are:</p>
  
  <ul>
  <li>Is this a good approach for this scenario?</li>
  <li>Should the AppView be listening to multiple stores? How should I prevent the AppView from rendering several times in a row? Right now, when a fruit has been moved, both FruitStore and AppStateStore fire change events causing two renders in a row.</li>
  <li>The Flux article on the React site shows the view dispatching an action object (e.g. AppDispatcher.dispatch(TodoActions.updateText()) ) but would it be better if the action dispatched itself (e.g. just FruitActions.moveBasket() ) and the AppView is left unaware of the AppDispatcher?</li>
  <li>Currently only the AppView listens to the stores but should the individual Fruit components listen to the AppStateStore to re-render only themselves if they are to be highlighted?</li>
  <li>Is there a more complete example of the Flux architecture or something similar?</li>
  </ul>