Actualmente estoy aprendiendo a reaccionar con redux y sé que la inmutabilidad es un componente clave de estas tecnologías, sin embargo, estoy luchando por comprender completamente cómo implementarla.

Como tal, me preguntaba si había alguna hoja de trucos para la inmutabilidad de reacción / reducción por ahí.

Si no, ¿cuáles fueron sus métodos preferidos para implementar la inmutabilidad en sus aplicaciones de react redux?

3
Thomas_Hoadley 10 may. 2016 a las 19:08

4 respuestas

La mejor respuesta

Por su propia naturaleza, el estado de la aplicación Redux ya es inmutable. Redux destruye el estado de su aplicación y reconstruye una nueva cada vez que dispara una acción (que activa un reductor que reconstruye el estado). Por lo tanto, no hay una hoja de trucos para hacer que Redux funcione inmutablemente porque ya lo hace.

Es posible que se confunda porque hay bibliotecas que se ocupan de estructuras inmutables, como Immutable.js, y hay paquetes para incorporarlos en Redux, como redux-immutable. Si bien usar Immutable.js significaría que sus partes individuales de estado se guardan como estructuras inmutables, esto no es necesario para hacer que su estado de aplicación sea inmutable porque la naturaleza fundamental de su estado de aplicación ya es inmutable con o sin una biblioteca. El uso de Immutable.js con Redux es principalmente útil para cosas como comparar rápidamente los accesorios transmitidos desde el estado para ver si han cambiado para que pueda evitar los renders.

2
Andy Noelker 10 may. 2016 a las 17:41

Lo principal que me sorprendió es que mientras devuelve el objeto state del reductor, no hay nada en redux que lo obligue a mutar simplemente el estado anterior, accidentalmente o de otra manera.

Estaba devolviendo una copia del estado actualizado con Object.assign({}, state, {key: 'new value'}), PERO si su estado no es plano, es decir

state => {foo: {bar: {baz: 'some value'}}}

Los objetos anidados serán referenciados en lugar de copiados ya que Object.assign() no es una copia profunda, y se vuelve muy fácil mantenerlo en estado obsoleto, o anidar nuclearmente accidentalmente propiedades sobrescribiendo valores superiores.

Immutable.js y otras bibliotecas lo ayudarán con las utilidades para resolver este problema. O simplemente podría mantener el estado plano como recomiendan los documentos de redux. Puede copiar cada propiedad anidada individualmente, pero esto agrega una tonelada de cruft al reductor.

0
riley 8 sep. 2016 a las 15:38

¡Acabo de escribir una publicación de blog sobre esto! Puede encontrarlo aquí: http: / /www.curbitssoftware.com/2017/08/25/react-redux-immutable-update-cheat-sheet/

Una cosa que es realmente importante cuando se trabaja con Redux es que nunca debe mutar (cambiar directamente) su estado. En su lugar, siempre debe devolver una copia del estado que cambia (un error común es que necesita copiar / clonar todo, lea más aquí y aquí. Este significa que necesita aprender nuevas formas de trabajar con matrices, cambiar la propiedad de los objetos, etc. Para facilitar esto, queríamos compartir nuestra propia hoja de trucos / libro de recetas para los casos más comunes.

¡Buena suerte!

1
Kenny Grant 2 sep. 2017 a las 08:04

Encontré esta serie de videos realmente útil con respecto a este tema:

https://egghead.io/courses/getting-started-with-redux

Es gratis y recomendado desde los documentos de React. Hay secciones cortas y específicas que describen cómo escribir funciones reductoras que no modifiquen el estado existente. Discuten el uso del operador de propagación Object.assign(), ES6 ..., etc.

Una estrategia particular que encontré útil es probar usando deepFreeze en el estado original para asegurar que sus funciones reductoras no lo modifiquen.

https://www.npmjs.com/package/deep-freeze-strict

0
theUtherSide 30 ago. 2016 a las 21:01