Redux es una pequeña biblioteca que representa el estado como objetos (inmutables). Y nuevos estados al pasar el estado actual a través de funciones puras para crear estados de objeto/aplicación completamente nuevos.

Si tus ojos están vidriosos allí, no te preocupes. En resumen, Redux no representa cambios en el estado de su aplicación mediante la modificación de objetos (como lo haría con los paradigmas orientados a objetos). En cambio, los cambios de estado se representan como la diferencia entre el objeto de entrada y el objeto de salida ( var output = reducer(input) ). Si muta la input o la output , invalida el estado.

Para resumir de otra manera, la inmutabilidad es un requisito de Redux porque Redux representa el estado de su aplicación como "instantáneas de objetos congelados". Con estas instantáneas discretas , puede guardar su estado o revertir el estado y, en general, tener más "contabilidad" para todos los cambios de estado.

El estado de su aplicación solo cambia mediante una categoría de funciones puras llamadas reductores. Los reductores tienen 2 propiedades importantes:

1. Nunca mutan , devolviendo objetos recién construidos: esto permite razonar sobre entrada + salida sin efectos secundarios
2. Su firma es siempre function name(state, action) {} , por lo que facilita su composición:

Supongamos que el estado se ve así:

 var theState = { _2ndLevel: { count: 0 } }

Queremos incrementar el conteo, entonces hacemos estos reductores

 const INCR_2ND_LEVEL_COUNT = 'incr2NdLevelCount'; function _2ndlevel (state, action) { switch (action.type) { case INCR_2ND_LEVEL_COUNT: var newState = Objectd.assign({}, state); newState.count++ return newState; } } function topLevel (state, action) { switch (action.type) { case INCR_2ND_LEVEL_COUNT: return Object.assign( {}, {_2ndLevel: _2ndlevel(state._2ndlevel, action)} ); } }

Tenga en cuenta el uso de Object.assign({}, ...) para crear objetos completamente nuevos en cada reductor:

Suponiendo que hemos conectado Redux a estos reductores, entonces si usamos el sistema de eventos de Redux para activar un cambio de estado...

 dispatch({type: INCR_2ND_LEVEL_COUNT})

... Redux llamará:

 theNewState = topLevel(theState, action);

NOTA: action es de dispatch()

Ahora theNewState es un objeto completamente nuevo .

Nota: puede imponer la inmutabilidad con una biblioteca (o nuevas funciones de idioma ), o simplemente tener cuidado de no mutar nada: D

Para una mirada más profunda, le recomiendo que vea este video de Dan Abramov (el creador). Debe responder a cualquier pregunta persistente que tenga.

Los siguientes beneficios de la inmutabilidad se mencionan en la documentación de Redux :

• Tanto Redux como React-Redux emplean verificación de igualdad superficial. En particular:
  • La utilidad combineReducers de Redux verifica superficialmente los cambios de referencia causados por los reductores a los que llama.
  • El método de conexión de React-Redux genera componentes que verifican superficialmente los cambios de referencia en el estado raíz y los valores de retorno de la función mapStateToProps para ver si los componentes envueltos realmente necesitan volver a renderizarse. Tal verificación superficial requiere inmutabilidad para funcionar correctamente.
• La gestión de datos inmutable, en última instancia, hace que el manejo de datos sea más seguro.
• La depuración de viajes en el tiempo requiere que los reductores sean funciones puras sin efectos secundarios, para que pueda saltar correctamente entre diferentes estados.

La razón principal por la que Redux usa la inmutabilidad es que no tiene que atravesar un árbol de objetos para verificar los cambios en cada valor clave. En cambio, solo verificará que la referencia del objeto haya cambiado o no para actualizar DOM en el cambio de estado.