Element aus dem Array im verschachtelten Objekt löschen?

Question

Wie kann ich das tun? Mein Speicher ist wie folgt aus:

{ 
    ..., 
    playlist : [ 
     ..., 
     { 
      id : 1, 
      title : "fancy-playlist-title", 
      songs : [ 
      { id : 1 }, 
      { id : 2 }, 
      ... and so on 
      ] 
     } 
    ] 
} 

Ich habe diesen Minderer:

if(action.type === "REMOVE_FROM_PLAYLIST"){ 
     return { 
      ...state, 
      playlist : [ 
       ...state.playlist, 
       ...state.playlist[action.index].songs.splice(0, action.indexSongs), 
       ...state.playlist[action.index].songs.splice(action.indexSongs+1) 
      ] 
     } 
    } 

UPDATE

jede Playlist unendlich Songs haben kann, denn Playlist Array viele Objekte der Wiedergabeliste enthält wie diese

playlist : [ 
    { 
     id : 1, 
     title : "title", 
     songs : [] 
    },{ 
    id : 2, 
    title : "playlist 2", 
    songs : [] 
    }, 
    {... and so on} 
] 

Meine komplette rot ucer ist so

export default function(state = {}, action) { 

if(action.type === "REMOVE_FROM_PLAYLIST"){ 

     //action.index : current index of playlist 
     //action.indexSongs : current index of song that I want to delete from current playlist 

     let playlist = state.playlist[action.index].slice(0, action.index).concat(state.playlist[action.index].slice(action.index + 1)); 
     return { 
      ...state, 
      playlist : [ 
       ...state.playlist, 
       ...playlist.slice(0, action.indexSongs), 
       ...playlist.slice(action.indexSongs + 1) 
      ] 
     } 
    } 

return state; 
} 

Meine Frage ist, wie kann ich einen Song einer Playlist löschen? Ich sende den Index der aktuellen Playlist und den Index des Songs der aktuellen Playlist.

Answer 1

splicemutiert der Array-Zustand, den Sie nicht tun sollten.

Was Sie wollen, ist eine Kombination aus slice und concat:

playlist.slice(0, indexOfSong) // copy a portion of the array 
           // from the start to the indexOfSong 

     .concat(    // concatenate it with: 

      playlist.slice(indexOfSong + 1) 
           // copy of a portion of the array from 
           // the index just after indexOfSong 
           // to the end of the playlist 
     ); 

Das Obige kann wie folgt mit ES6 Spread-Syntax geschrieben werden:

[ 
    ...playlist.slice(0, indexOfSong) 
    ...playlist.slice(indexOfSong + 1)); 
] 

EDIT, wenn man bedenkt Ihre letzte Frage aktualisieren, sollte Ihr Reducer wie aussehen dies:

export default function(state = {}, action) { 

if(action.type === "REMOVE_FROM_PLAYLIST"){ 
    return { 
      ...state, 
      playlist : [ 
       ...state.playlist, 
       ...playlist[action.index].songs.slice(0, action.indexSongs), 
       ...playlist[action.index].songs.slice(action.indexSongs + 1) 
      ] 
     } 
    } 
} 

Answer 2

Wenn Sie lodash verwenden, könnten Sie _.merge

https://lodash.com/docs/4.17.2#merge

if(action.type === "REMOVE_FROM_PLAYLIST"){ 
    let newPlaylistWihoutDeletedItem = state.playlist.splice(action.index, 1); 

    return _.merge({}, state, { 
     playlist: newPlaylistWihoutDeletedItem 
    }); 
}