title: React-Redux: Should all component states be kept in Redux Store
body: <p>Say I have a simple toggle:</p>
  
  <p>
  </p>
  
  <p>When I click the button, the Color component changes between red and blue</p>
  
  <p>I might achieve this result by doing something like this.</p>
  
  <p>index.js</p>
  
  <pre><code>Button: onClick={()=&gt;{dispatch(changeColor())}}
  Color: this.props.color ? blue : red
  </code></pre>
  
  <p>container.js</p>
  
  <pre><code>connect(mapStateToProps)(indexPage)
  </code></pre>
  
  <p>action_creator.js</p>
  
  <pre><code>function changeColor(){
   return {type: 'CHANGE_COLOR'}
  }
  </code></pre>
  
  <p>reducer.js</p>
  
  <pre><code>switch(){
  case 'CHANGE_COLOR':
  return {color: true}
  </code></pre>
  
  <p>but this is a hell of a lot of code to write for something that I could have achieved in 5 seconds with jQuery, some classes, and some css...</p>
  
  <p>So I guess what I'm really asking is, what am I doing wrong here?</p>