Rimuovere una proprietà in un oggetto immutabilmente

Sto usando Redux. Nel mio riduttore sto cercando di rimuovere una proprietà da un oggetto come questo:

const state = {
    a: '1',
    b: '2',
    c: {
       x: '42',
       y: '43'
    },
}

E voglio avere qualcosa del genere senza dover mutare lo stato originale:

const newState = {
    a: '1',
    b: '2',
    c: {
       x: '42',
    },
}

Provai:

let newState = Object.assign({}, state);
delete newState.c.y

ma per alcuni motivi, elimina la proprietà da entrambi gli stati.

Potrebbe aiutarmi a farlo?

Che ne dici di usare la sintassi di assegnazione destrutturante ?

const original = {
  foo: 'bar',
  stack: 'overflow',
};

// If the name of the property to remove is constant
const { stack, ...withoutFirst } = original;
console.log(withoutFirst); // Will be { "foo": "bar" }

// If the name of the property to remove is from a variable
const key = 'stack'
const { [key]: value, ...withoutSecond } = original;
console.log(withoutSecond); // Will be { "foo": "bar" }

// To do a deep removal with property names from variables
const deep = {
  foo: 'bar',
  c: {
   x: 1,
   y: 2
  }
};

const parentKey = 'c';
const childKey = 'y';
// Remove the 'c' element from original
const { [parentKey]: parentValue, ...noChild } = deep;
// Remove the 'y' from the 'c' element
const { [childKey]: removedValue, ...childWithout } = parentValue;
// Merge back together
const withoutThird = { ...noChild, [parentKey]: childWithout };
console.log(withoutThird); // Will be { "foo": "bar", "c": { "x": 1 } }

Trovo ES5 metodi di array come filter, mape reduceutili perché ritornano sempre nuovi array o oggetti. In questo caso Object.keysuserei per iterare l'oggetto eArray#reduce per trasformarlo in un oggetto.

return Object.assign({}, state, {
    c: Object.keys(state.c).reduce((result, key) => {
        if (key !== 'y') {
            result[key] = state.c[key];
        }
        return result;
    }, {})
});

È possibile utilizzare _.omit(object, [paths])dalla libreria lodash

il percorso può essere nidificato ad esempio: _.omit(object, ['key1.key2.key3'])

Basta usare la funzione di distruzione degli oggetti ES6

const state = {
    c: {
       x: '42',
       y: '43'
    },
}

const { c: { y, ...c } } = state // generates a new 'c' without 'y'

console.log({...state, c }) // put the new c on a new state

Questo perché stai copiando il valore di state.c dell'altro oggetto. E quel valore è un puntatore a un altro oggetto JavaScript. Quindi, entrambi questi puntatori puntano allo stesso oggetto.

Prova questo:

let newState = Object.assign({}, state);
console.log(newState == state); // false
console.log(newState.c == state.c); // true
newState.c = Object.assign({}, state.c);
console.log(newState.c == state.c); // now it is false
delete newState.c.y;

Puoi anche fare una copia profonda dell'oggetto. Vedi questa domanda e troverai ciò che è meglio per te.

Cosa ne pensi di questo:

function removeByKey (myObj, deleteKey) {
  return Object.keys(myObj)
    .filter(key => key !== deleteKey)
    .reduce((result, current) => {
      result[current] = myObj[current];
      return result;
  }, {});
}

Filtra la chiave da eliminare, quindi crea un nuovo oggetto dalle chiavi rimanenti e dall'oggetto iniziale. L'idea è stata rubata dal fantastico programma di reazione di Tyler McGinnes.

JSBin

function dissoc(key, obj) {
  let copy = Object.assign({}, obj)
  delete copy[key]
  return copy
}

Inoltre, se cerchi un toolkit di programmazione funzionale, guarda Ramda .

È possibile utilizzare l'helper di immutabilità per disinserire un attributo, nel tuo caso:

import update from 'immutability-helper';

const updatedState = update(state, {
  c: {
    $unset: ['y']
  }
});    

A partire dal 2019, un'altra opzione è quella di utilizzare il Object.fromEntriesmetodo. Ha raggiunto la fase 4.

const newC = Object.fromEntries(
    Object.entries(state.c).filter(([key]) => key != 'y')
)
const newState = {...state, c: newC}

La cosa bella è che gestisce bene i tasti interi.

È facile con Immutable.js :

const newState = state.deleteIn(['c', 'y']);

descrizione di deleteIn ()

Il problema che stai riscontrando è che non stai clonando in profondità il tuo stato iniziale. Quindi hai una copia superficiale.

È possibile utilizzare l'operatore di diffusione

  const newState = { ...state, c: { ...state.c } };
  delete newState.c.y

O seguendo il tuo stesso codice

let newState = Object.assign({}, state, { c: Object.assign({}, state.c) });
delete newState.c.y

Io di solito uso

Object.assign({}, existingState, {propToRemove: undefined})

Mi rendo conto che questo non sta effettivamente rimuovendo la proprietà ma per quasi tutti gli scopi ^{1 è} funzionalmente equivalente. La sintassi per questo è molto più semplice delle alternative che ritengo un compromesso piuttosto buono.

¹ Se si utilizza hasOwnProperty(), sarà necessario utilizzare la soluzione più complicata.

Uso questo modello

const newState = Object.assign({}, state);
      delete newState.show;
      return newState;

ma nel libro ho visto un altro modello

return Object.assign({}, state, { name: undefined } )

utilità ;))

const removeObjectField = (obj, field) => {

    // delete filter[selectName]; -> this mutates.
    const { [field]: remove, ...rest } = obj;

    return rest;
}

tipo di azione

const MY_Y_REMOVE = 'MY_Y_REMOVE';

creatore di azioni

const myYRemoveAction = (c, y) => {

    const result = removeObjectField(c, y);

        return dispatch =>
            dispatch({
                type: MY_Y_REMOVE,
                payload: result
            })
    }

riduttore

export default (state ={}, action) => {
  switch (action.type) {
    case myActions.MY_Y_REMOVE || :
      return { ...state, c: action.payload };
    default:
      return state;
  }
};

Come già accennato in alcune delle risposte, è perché stai cercando di modificare uno stato nidificato, ad es. un livello più profondo. Una soluzione canonica sarebbe quella di aggiungere un riduttore a xlivello statale:

const state = {
    a: '1',
    b: '2',
    c: {
       x: '42',
       y: '43'
    },
}

Riduttore di livello più profondo

let newDeepState = Object.assign({}, state.c);
delete newDeepState.y;

Riduttore di livello originale

let newState = Object.assign({}, state, {c: newDeepState});