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

Digamos que tengo una simple palanca:

Cuando hago clic en el botón, 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 : red

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

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

reducer.js

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

pero esto es un montón de código para escribir para algo que podría haber logrado en 5 segundos con jQuery, algunas clases y algo de css ...

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

Redux está diseñado principalmente para el "estado de la aplicación". Es decir, cualquier cosa relacionada con la lógica de su aplicación. La vista construida sobre él es un reflejo 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 resto de la aplicación? ¿Otras partes de la aplicación se comportarán de manera diferente en función de ese estado? En muchos casos menores, ese no será el caso. Tome un menú desplegable: el hecho de que esté abierto o cerrado probablemente no tendrá ningún efecto en otras partes de la aplicación. Por lo tanto, conectarlo a su tienda probablemente sea excesivo. Ciertamente es una opción válida, pero en realidad no le reporta ningún beneficio. Es mejor usarlo this.statey terminarlo .

En su ejemplo particular, ¿el color de ese botón está activado para hacer alguna diferencia en otras partes de la aplicación? Si se trata de una especie de activación / desactivación global para la mayor parte de su aplicación, definitivamente pertenece a la tienda. Pero si solo está cambiando el color de un botón cuando hace clic en el botón, puede dejar el estado de color definido localmente. La acción de hacer clic en el botón puede tener otros efectos que requieran un envío de acción, pero eso es independiente de la simple pregunta de qué color debería ser.

En general, intente mantener el estado de su aplicación lo más pequeño posible. No tienes que meter todo ahí. Hágalo cuando sea necesario o tiene mucho sentido mantener algo allí. O si le facilita la vida al usar Dev Tools. Pero no sobrecargue demasiado su importancia.

Preguntas frecuentes de Redux: Organizar el estado de
esta parte del documento oficial de redux respondió bien a su pregunta.

Usar el estado del componente local está bien . Como desarrollador, es su trabajo determinar qué tipos de estado componen su solicitud y dónde debe vivir cada parte del estado. Encuentre un equilibrio que funcione para usted y sígalo.

Algunas reglas generales comunes para determinar qué tipo de datos deben colocarse en Redux:

• ¿A otras partes de la aplicación les importan estos datos?
• ¿Necesita poder crear más datos derivados basados ​​en estos datos originales?
• ¿Se utilizan los mismos datos para controlar varios componentes?
• ¿Tiene algún valor para usted poder restaurar este estado a un punto dado en el tiempo (es decir, depuración del viaje en el tiempo)?
• ¿Desea almacenar en caché los datos (es decir, usar lo que está en estado si ya está allí en lugar de volver a solicitarlo)?

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

Use React para un estado efímero que no le importa a la aplicación globalmente y que no mute de manera compleja. Por ejemplo, un conmutador en algún elemento de la interfaz de usuario, un estado de entrada de formulario. Use Redux para el estado que importa a nivel mundial o está mutado de manera compleja. Por ejemplo, usuarios almacenados en caché o un borrador de publicación.

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

La regla general es: haz lo que sea menos incómodo.

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

Sí, vale la pena esforzarse por almacenar todos los estados de los componentes en Redux . Si lo hace, se beneficiará de muchas funciones de Redux, como la depuración de viajes en el tiempo y los informes de errores repetibles. Si no lo hace, esas funciones podrían quedar completamente inutilizables .

Siempre que no almacene un cambio de estado de componente en Redux, ese cambio se perderá por completo de la pila de cambios de Redux y la interfaz de usuario de su aplicación no estará sincronizada con la tienda. Si esto no es importante para usted, entonces pregúntese por qué usar Redux. ¡Su aplicación será menos compleja sin él!

Por motivos de rendimiento, es posible que desee recurrir a this.setState()cualquier cosa que envíe muchas acciones repetidamente. Por ejemplo: almacenar el estado de un campo de entrada en Redux cada vez que el usuario escribe una clave puede resultar en un rendimiento deficiente. Puede resolver esto tratándolo como una transacción: una vez que la acción del usuario está "confirmada", guarde el estado final en Redux.

Su publicación original menciona que el método Redux es "una gran cantidad de código para escribir". Sí, pero puede usar abstracciones para patrones comunes, como el estado del componente local.