¿Por qué los objetos en Redux deben ser inmutables?

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

Si tienes los ojos vidriosos allí no te preocupes. En resumen, Redux no representa cambios en el estado de su aplicación modificando objetos ( como lo haría con paradigmas orientados a objetos). En su lugar, los cambios de estado se representan como la diferencia entre la entrada objeto y el objeto de salida (var output = reducer(input)). Si muta input o 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 invertirlo, y generalmente tener más "contabilidad" para todos los cambios de estado.

El estado de tu app es solo cambiado por una categoría de funciones puras llamadas reductores. Los reductores tienen 2 propiedades importantes:

1. Ellos nunca mutan , devolviendo objetos de nueva construcción: Esto permite razonar sobre entrada + salida sin efectos secundarios
2. Su firma es siempre function name(state, action) {}, así que hace que sea fácil de componer:

Supongamos que el estado se ve así:

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

Queremos incrementar la cuenta, así que hacemos estos reductores{[15]]}

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 Objectd.assign({}, {_2ndLevel: _2ndlevel(state._2ndlevel)});
    }
}

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

Suponiendo que hemos conectado Redux a estos reductores, entonces si usamos el sistema de eventos de Redux para desencadenar 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 características del lenguaje ), o simplemente tenga cuidado de no mutar nada: D

Para una mirada más profunda, te recomiendo encarecidamente checkout este video por Dan Abramov (el creador). Debe responder a cualquier pregunta persistente que tenga.