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

objetos inmutables

Question

¿Por qué los objetos en Redux deben ser inmutables? Sé que algunos frameworks como Angular2 utilizarán onPush y pueden aprovechar la inmutabilidad para comparar estados de vistas para una renderización más rápida, pero me pregunto si hay otras razones, ya que Redux es agnóstico de framework y sin embargo menciona en sus propios documentos para usar inmutabilidad (independientemente del marco).

Apreciar cualquier comentario.

Answer 1

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 objeto / aplicación completamente nuevo.

Si tienes los ojos vidriosos, no te preocupes. En resumen, Redux no representa cambios en el estado de su aplicación modificando 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 su estado de aplicación como "instantáneas de objetos congelados". Con estas instantáneas discretas , puede guardar su estado o revertir el estado, y generalmente tiene más "contabilidad" para todos los cambios de estado.

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

1. Nunca cambian , devolviendo objetos recién construidos: Esto permite razonar sobre la entrada + salida sin efectos secundarios
2. Su firma siempre es function name(state, action) {} , por lo que es más fácil componerlas:

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

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

Suponiendo que hayamos 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: la action es de dispatch()

Ahora theNewState es un objeto completamente nuevo .

Nota: Puede aplicar la inmutabilidad con una biblioteca (o nuevas funciones de idioma ), o simplemente tenga cuidado de no mutar nada: D

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

Answer 2

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

• Tanto Redux como React-Redux emplean comprobación de igualdad superficial . En particular:
  • La utilidad combineReducers de Redux comprueba superficialmente los cambios de referencia causados ​​por los reductores que llama.
  • El método de conexión de React-Redux genera componentes que revisan superficialmente los cambios de referencia al estado raíz , y los valores de retorno de la función mapStateToProps funcionan para ver si los componentes envueltos realmente necesitan volver a procesarse. Tal comprobació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 viaje en el tiempo requiere que los reductores sean funciones puras sin efectos secundarios, de modo que pueda saltar correctamente entre diferentes estados.

Answer 3

Artículo de Greate https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec

Junto con los datos inmutables, las funciones puras son uno de los conceptos centrales de la programación funcional