React-Redux: ¿Deberían mantenerse todos los estados componentes en la Tienda Redux?

Digamos que tengo un simple alternar:

Cuando hago clic en el button, el componente Color cambia entre rojo y azul

Podría lograr este resultado haciendo algo como esto.

index.js

Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : networking 

container.js

 connect(mapStateToProps)(indexPage) 

action_creator.js

 function changeColor(){ return {type: 'CHANGE_COLOR'} } 

networkingucer.js

 switch(){ case 'CHANGE_COLOR': return {color: true} 

pero este es un montón de código para escribir para algo que podría haber logrado en 5 segundos con jQuery, algunas classs y algunos css …

Entonces, supongo que lo que realmente estoy preguntando es, ¿qué estoy haciendo mal aquí?

Redux está destinado principalmente para "estado de aplicación". Es decir, cualquier cosa relacionada con su lógica de aplicación. La vista construida sobre ella es un reflection de ese estado, pero no tiene que usar exclusivamente ese contenedor de estado para todo lo que hace.

Simplemente haga estas preguntas: ¿Es este estado importante para el rest de la aplicación? ¿Se comportarán otras partes de la aplicación de forma diferente en function de ese estado? En muchos casos menores, ese no será el caso. Tome un menu desplegable: el hecho de que esté abierto o cerrado probablemente no tendrá un efecto en otras partes de la aplicación. Entonces, conectarlo a su tienda es probablemente excesivo. Sin duda es una opción válida, pero en realidad no genera ningún beneficio. Será mejor que this.state y lo llames un día.

En su ejemplo particular, ¿se cambia el color de ese button para hacer alguna diferencia en otras partes de la aplicación? Si se trata de una especie de alternancia global de encendido / apagado para una parte importante de su aplicación, definitivamente pertenece a la tienda. Pero si solo está cambiando el color de un button onclick en el button, puede dejar el estado del color definido localmente. La acción de hacer clic en el button podría tener otros efectos que requieran un despacho de acción, pero eso está separado de la simple pregunta de qué color debería ser.

En general, trate de mantener su estado de aplicación lo más pequeño posible. No tienes que empujar todo allí. Hazlo cuando sea necesario o tiene mucho sentido mantener algo allí. O si te hace la vida más fácil al usar Dev Tools. Pero no sobrecargues demasiado su importancia.

Con el propósito de resaltar el gran enlace proporcionado por @ AR7, y porque ese enlace se movió hace un time:

Usa React para el estado efímero que no importa a la aplicación globalmente y no muta de forms complejas. Por ejemplo, alternar en algún elemento de UI, un estado de input de formulario. Use Redux para el estado que importa globalmente o está mutado de maneras complejas. Por ejemplo, usuarios almacenados en caching o un borrador posterior.

Algunas veces querrá pasar del estado Redux al estado React (cuando almacenar algo en Redux se torna incómodo) o al revés (cuando más componentes necesitan tener acceso a algún estado que solía ser local).

La regla de oro es: hacer lo que sea less incómodo.

Dan Abramov: https://github.com/reactjs/networkingux/issues/1287#issuecomment-175351978

Preguntas frecuentes sobre Redux: Estado organizador
esta parte del doc. oficial de networkingux respondió su pregunta.

Usar el estado del componente local está bien . Como desarrollador, es su trabajo determinar qué types de estado conforman su aplicación y dónde debe vivir cada estado. Encuentre un equilibrio que funcione para usted y vaya con eso.

Algunas reglas comunes para determinar qué tipo de datos se deben poner en Redux:

  • ¿Cuidan otras partes de la aplicación estos datos?
  • ¿Necesita poder crear más datos derivados basados ​​en estos datos originales?
  • ¿Se están usando los mismos datos para controlar múltiples componentes?
  • ¿Hay algún valor para usted en poder restaurar este estado a un punto dado en el time (es decir, la debugging del viaje en el time)?
  • ¿Desea almacenar en caching los datos (es decir, usar lo que está en estado si ya está allí en lugar de volver a solicitarlo)?