title: How to handle state transitions in a React / Flux component
body: <p>Given I have an AJAX based search field that reacts on user input, requests search results from a backend via AJAX, shows the results in a dropdown below the search field, allows navigation through the search results via cursor keys and reacts on <code>esc</code> key presses in an intelligent way.</p>
  
  <p>Since the current Backbone based component is broken in many ways, I'd like to reimplement that search component using <code>React</code> and maybe <code>Flux</code> architecture.</p>
  
  <p>During planning it turned out, that my component has at least a number of 10 different states (maybe even more), it has to react to <code>actions</code> triggered by user inputs, and as well to <code>actions</code> triggered by asynchronous server responses.</p>
  
  <p><strong>Question1</strong>: Should I model all state in a <code>store</code> instead of a the parent component? That meant, that every user input changes the stores state, for example the <code>:searchQuery</code>, <code>:searchResults</code> and my parent view component reacts to that state changes?</p>
  
  <p><strong>Question2</strong>: Or should I model all state in the parent component itself and omit a <code>store</code>, <code>dispatcher</code> and <code>actions</code> completely?</p>
  
  <p><strong>Question3</strong>: Independently from handling state in a <code>store</code> or in the parent component itself, it turned out, that the component itself can have at least 10 different states, and there should only be a certain number of transitions allowed. Usually, I'd pull in a statemachine implementation here, model all <code>:states</code> and allowed <code>:transitions</code> and execute transitions everytime an action is received by the <code>store</code> or a callback method is called in the parent component. What is the correct <code>React way</code> to handle <code>states</code> and <code>transitions</code> between these <code>states</code> in a component?</p>
  
  <p><strong>Question4</strong>: Which is the to-go-state-of-the-art <code>Flux</code> implementation for Javascript? I have seen <a href="https://www.npmjs.com/package/reflux" rel="nofollow">reflux</a> so far, but I'm not sure, that's my poison.</p>
  
  <p>I am open to all kind of suggestions here.</p>