Rimuovere i dati dagli oggetti nidificati senza mutare

Question

C'è un modo elegante per rimuovere un oggetto da un array che fa parte di un array? Ho lavorato con React e Redux per un po 'di tempo ma mi sono bloccato diverse ore ogni volta che devo rimuovere o inserire dati senza mutare lo stato.

Il riduttore è un array contenente oggetti che hanno un ID e un altro array con gli oggetti, in questo modo:

[ 
{ id:123, 
    items:[ 
      { id: abc, 
      name: albert 
      }, 
      ... 
     ] 
}, 
... 
] 

ricevo entrambi gli ID e la necessità di rimuovere l'elemento con ID abc.

Answer 1

Per rimuovere un elemento da un array da ID:

return state.filter(item => item.id !== action.id) 

per rimuovere una chiave da un oggetto da id:

let copy = Object.assign({}, state) // assuming you use Object.assign() polyfill! 
delete copy[action.id] // shallowly mutating a shallow copy is fine 
return copy 

(bonus) Lo stesso con object spread operator proposal:

let { [action.id]: deletedItem, ...rest } = state 
return rest 

Answer 2

È possibile utilizzare Underscore's reject. Fa esattamente quello che stai cercando di fare.

Answer 3

Se si decide per la pianura Javascript, il modo più elegante che posso pensare è quello di utilizzare Array.prototype.reduce per ridurre lo stato:

var state = [ 
{ id: 123, 
    items:[ 
      { id: 'abc', 
      name: 'albert' 
      }, 
      ... 
     ] 
}, 
... 
] 

function filterOut (state) { 
    return (bucketId, personId) => { 
    return state.reduce((state, bucket) => { 
     return state.concat(
     (bucketId === bucket.id) ? 
      Object.assign({}, bucket, {items: bucket.items.filter((person) => person.id !== personId)}) : 
      bucket 
    ); 
    }, []); 
    } 
} 

var newState = filterOut(state)(123, 'abc'); 

Answer 4

È anche possibile utilizzare lodash's omit method.

Si noti che l'importazione di lodash aumenterà un po 'le dimensioni della build. Tenere sotto controllo un po 'importando solo il metodo specifico: import omit from 'lodash/omit';

Se possibile, io suggerisco di usare l'oggetto operatore di diffusione, come descritto nella Dan's answer.

Answer 5

ho risolto il mio problema in questo modo

if(action.type === "REMOVE_FROM_PLAYLIST"){ 
     let copy = Object.assign({}, state) 
     delete copy.playlist[action.index].songs[action.indexSongs]; 

     return copy; 
    } 

Speranza che aiuta chiunque altro.

Answer 6

const remove = (state, bucketId, personId) => state.map(
    bucket => bucket.id === bucketId 
    ? { ...bucket, items: bucket.items.filter(person => person.id !== personId) } 
    : bucket, 
); 

Usage:

const state = [ 
    { 
    id: 123, 
    items: [ 
     { 
     id: 'abc', 
     name: 'Kinna', 
     }, 
     { 
     id: 'def', 
     name: 'Meggy', 
     }, 
    ], 
    }, 
    { 
    id: 456, 
    items: [ 
     { 
     id: 'ghi', 
     name: 'Ade', 
     }, 
     { 
     id: 'jkl', 
     name: 'Tades', 
     }, 
    ], 
    }, 
]; 

console.log(remove(state, 123, 'abc'));