Redux: Removing item from array

[felixaa]

Hey, I'm trying to remove an item from an array using the following:

  if (action.type === 'SHOUTOUT_DELETED') {
    return {
      shoutouts: [
        ...state.shoutouts.slice(0, action.index),
        ...state.shoutouts.slice(action.index + 1)
      ]
    }
  }

In theory this should only remove the index provided. But it removes all the items above the given index. Any clue on what's causing this behaviour?

Thanks!

[canibanoglu]

I can't see anything wrong with the code you provided and it works as expected when I try to remove an item at a specific index in my browser console. Are you quite sure this is the code that produces the unexpected behavior?

Also, have you tried debugging it to see what might be the problem?

[markerikson]

This is a usage question, and should be asked on Stack Overflow instead. Also, even though it involves some reducer code, it really doesn't have anything to do with Redux itself - it's a question about Javascript usage.

That said, one alternate approach would simply be:

return {
   shoutouts : state.shoutouts.filter( (item, index) => index !== action.index)
}

[felixaa]

I appreciate the help guys! Such a lovely community to join as a newb. Much love❤️

[jacenko]

In case anyone comes here from Google, both of @felixaa 's and @markerikson 's approaches work. Check the rest of your code and logs.

[big-toni]

still not working, removes all the items above the given index, only commented filter function working :

case actionTypes.REMOVE_IMAGE: {
  alert(action.payload)
    return {...state,
      // adImagePaths: state.adImagePaths.filter((_, index) => index != action.payload)
      adImagePaths: [
          ...state.adImagePaths.slice(0, action.payload),
          ...state.adImagePaths.slice(action.payload + 1)
        ]
  }
}

[mgscreativa]

Hi! in my case I have a users table, with checkboxes on every row to select users. On clicking the checkboxes I update the app state with an array of users IDs. Each checkbox is populated with the user ID. If one checkbox gets unchecked, I run this reducer:

    case USER_SELECTION_REMOVE:
      // Check if user ID is in the selected users array
      if (state.selectedUsers.indexOf(action.payload) > -1) {
        return {
          ...state,
          selectedUsers: state.selectedUsers.filter(item => item !== action.payload),
        };
      }

With this code I get rid of UserID when his checkbox is unchecked

[kurtwilliam]

For anyone coming from Google with this issue still wanting to use slice:

In my case the action.index was returning as a string, so if action.index === '1' you would get action.index + 1 returning as 11. If you convert it to a number it should work, you would get 2.

javascript if (action.type === 'SHOUTOUT_DELETED') { const numIndex = parseInt(action.index) return { shoutouts: [ ...state.shoutouts.slice(0, numIndex), ...state.shoutouts.slice(numIndex+ 1) ] } }

[Mattssonm]

Thank you @kurtwilliam. Had the same issue! Did not think about that! :)