Remove element from a nested array without using Immutability Helper

Question

I have a state Object that looks like this:

//State Object
playlistDict: {
  someId1: {
    active: false,
    id: 'someId',
    name: 'someName',
    pages: [ 'pageId1', 'pageId2', 'pageId3', etc ]  // I want to remove an element from this array
  },
  someId2: {
    active: false,
    id: 'someId2',
    name: 'someName2',
    pages: [ 'pageId11', 'pageId22', 'pageId33', etc ] // I want to remove an element from this array
  }
}

I'm trying to write a reducer that removes a page element given the index to remove without using immutability helper.

This is what I'm trying to do but my syntax is off and I'm not sure what's the correct way to write the reducer:

export function _removePageFromPlaylist( playlistId, pageIndex ) {
  return { type: types.REMOVE_PAGE_FROM_PLAYLIST, playlistId, pageIndex };
}

case types.REMOVE_PAGE_FROM_PLAYLIST: {    
      let playlistCopy = Object.assign( {}, state.playlistDict[ action.playlistId ]);
      playlistCopy.pages = Object.assign( {}, state.playlistDict[ action.playlistId ].pages );
      playlistCopy.pages.splice( action.pageIndex, 1 );

      return Object.assign({}, state, {
        playlistDict: { ...state.playlistDict, playlistDict[ action.playlistId ]: playlistCopy }  // doesn't like this syntax in particular
      });
    }

EDIT: In regards to people thinking it's the same as my other question, I'm asking this question because I'm trying to figure out if my reducer USING immutability helper is messing up my Firebase database, so I'm trying to figure out how to write the reducer WITHOUT using immutability helper so i can help eliminate what my bug is.

Possible duplicate of Removing an element in a nested array, but Firebase is turning the array into an Object — Panther
– Panther, Commented Aug 29, 2017 at 5:55
@Panther well I'm asking this question because I'm trying to figure out if my reducer USING immutability helper is messing up my Firebase database, so I'm trying to figure out how to write the reducer WITHOUT it. — user1189352
– user1189352, Commented Aug 29, 2017 at 5:56

Mayank Shukla · Accepted Answer · 2017-08-29 06:16:54Z

1

Use spread operator, and write it like this:

case types.REMOVE_PAGE_FROM_PLAYLIST: {    
    let playlistCopy = [...(state.playlistDict[ action.playlistId ].pages)];
    playlistCopy.splice( action.pageIndex, 1 );

    return {
        ...state,
        playlistDict: {
            ...state.playlistDict,
            [action.playlistId]: {
                ...state.playlistDict[action.playlistId],
                pages: playlistCopy
            }
        }
    }
}

edited Aug 29, 2017 at 6:16

answered Aug 29, 2017 at 6:04

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1189352 Over a year ago

"let playlistCopy = [...(state.playlistDict[ action.playlistId ].pages)];" my IDE doesn't like the syntax of that line

Ivan Minakov · Accepted Answer · 2017-08-29 06:23:37Z

1

Using Object Spread Operator:

case types.REMOVE_PAGE_FROM_PLAYLIST: {
  return {
    ...state,
    playlistDict: {
      ...state.playlistDict,
      [action.playlistId]: {
        ...state.playlistDict[action.playlistId],
        pages: [...state.playlistDict[action.playlistId].pages].splice(action.pageIndex, 1)
      }
    }
  }
}

edited Aug 29, 2017 at 6:23

answered Aug 29, 2017 at 6:12

Ivan Minakov

1,4528 silver badges12 bronze badges

2 Comments

user1189352 Over a year ago

this one deleted all the pages for some reason.. the pages property was null

Ivan Minakov Over a year ago

Sorry, i miss .pages. in last line. Now it should work well

Collectives™ on Stack Overflow

Remove element from a nested array without using Immutability Helper

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related