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í?

3 Solutions collect form web for “React-Redux: ¿Deberían mantenerse todos los estados componentes en la Tienda Redux?”

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)?
  • Radio Input onChange solo se dispara una vez?
  • Cómo usar If-Else en JSX
  • ¿Cómo utilizar la verificación en contexto exprés de PayPal con ReactJS?
  • Cómo hacer que Redux Thunk y Apollo GraphQL trabajen juntos
  • operador de propagación en componente reactjs
  • React, valores de input bindings
  • ¿Cómo mejorar el performance del package web?
  • API RectJS componentDidMount y Fetch
  • Reaccionar: matriz de vinculación a campos añadidos dinámicamente
  • Simulando click el documento ReactJS / JSDom
  • Obteniendo error: "reactjsr.createclass no es una function"
  • Problemas de reusabilidad / escalabilidad con la aplicación react-flux
  • Jest React testing es6 import / export no mock no deseado
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.