javascript - inmutabilidad - ¿Cuál es la forma más corta de modificar objetos inmutables utilizando operadores de dispersión y desestructuración?

set immutable

Question

Estoy buscando una función pura, para modificar mi objeto de estado inmutable. El estado original dado como parámetro debe permanecer intacto. Esto es especialmente útil cuando se trabaja con marcos como Redux y facilita mucho el trabajo con objetos immutable en javascript. Sobre todo porque ya es posible trabajar con el operador de propagación de objetos utilizando Babel .

No encontré nada mejor que primero copie el objeto, y que asigne / borre la propiedad que quiero así:

function updateState(state, item) {
  newState = {...state};
  newState[item.id] = item;
  return newState;
}

function deleteProperty(state, id) {
    var newState = {...state};
    delete newState[id];
    return newState;
}

Siento que podría ser más corto

Answer 1

Acciones sobre el estado, donde el estado se considera inmutable.

Agregando o actualizando el valor de una propiedad :

// ES6:
function updateState(state, item) {
    return Object.assign({}, state, {[item.id]: item});
}

// With Object Spread:
function updateState(state, item) {
  return {
     ...state,
     [item.id]: item
  };
}

Borrando una propiedad

// ES6:
function deleteProperty(state, id) {
    var newState = Object.assign({}, state);
    delete newState[id];
    return newState; 
}

// With Object Spread:
function deleteProperty(state, id) {
    let  {[id]: deleted, ...newState} = state;
    return newState;
}

// Or even shorter as helper function:
function deleteProperty({[id]: deleted, ...newState}, id) {
    return newState;
}

// Or inline:
function deleteProperty(state, id) {
    return (({[id]: deleted, ...state}) => state)(state);
}

Answer 2

Eliminando un elemento de una matriz, solo use el filtro;)

[
    {id: 1, newKey:''someVar''},
    {id: 2, newKey:''someVar''}
]

Answer 3

En lugar de escribir el código de repetición (como se responde arriba: (({[id]: deleted, ...state}) => state)(state) ) que es difícil de leer, puedes usar alguna biblioteca para hacer lo mismo:

• https://github.com/cah4a/immutable-modify
• https://github.com/kolodny/immutability-helper
• https://github.com/M6Web/immutable-set
• https://github.com/bormind/immutable-setter

Por ejemplo:

const myArrayOfObjects = [
    {id: 1, keyToDelete: ''nonsense''},
    {id: 2, keyToDelete: ''rubbish''}
];

También es compatible con cualquier actualización anidada:

myArrayOfObjects.map(({ keyToDelete, ...item}) => { ...item, newKey:''someVar''});

Answer 4

Una solución ES6, que tiene un poco más de soporte es Object.assign :

const updateState = (state, item) => Object.assign({}, state, { [item.id]: item });

Answer 5

En una función de mapa

Para realizar este proceso dentro de una función de mapa (eliminar un atributo y agregar un nuevo atributo en cada objeto), dada una matriz de objetos:

CASE ''REMOVE_ITEM_SUCCESS'':

      let items = state.items.filter(element => element._id !== action.id);

      return {
            ...state, 
            items
      }

Elimine el atributo keyToDelete y agregue una nueva clave newKey con el valor "someVar" .

import {remove} from ''immutable-modify''

function updateState(state, item) {
   return remove(state, item.id)
}

Actualizando la matriz a

import {set} from ''immutable-modify''

function updateState(state, item) {
   return set(state, ''user.products'', (products) => ({
      ...products,
      items: products.items.concat(item),
      lastUpdate: Date.now()
   }))
}

Vea esta gran publicación para obtener más información sobre el método de eliminación.