Redux reducer failing to remove array element

Question

I'm having problems trying to get my reducer to work correctly in Redux. I'm new to Redux so I might be missing something simple, but I've played with it for a while and can't figure out what's going wrong.

Here is my process:

Define argument:

First I define the index value that I need. When logged, this returns the correct number...

const thisCommentIndex = parseInt(comments.indexOf(comment))

Function Call:

<div onClick={this.props.removeComment.bind(null, thisCommentIndex)}></div>

Action:

export function removeComment(index) {
   return {
      type: 'REMOVE_COMMENT',
      index
   }
}

Reducer:

function comments(state = [], action) {
   switch(action.type) {
      case 'REMOVE_COMMENT' :
         console.log('removing comment with index of ' + action.index)
         return [
            ...state.slice(0, action.index), // why isn't this working???
            ...state.slice(action.index)
         ]
      default :
         return state
   }
   return state;
}

---

When I console.log('removing COMMENT with index of ' + action.index) , it logs the action.index correctly, the integer I would expect. But the function doesn't remove the element as expected.

Strangely, if I simply pass the array index instead, it works fine (removes the array element). (I would just do this, but due to the way I have set up my app it won't work in this case).

Am I missing something here? Any help appreciated.

Answer 1

You're missing a +1 ...

return [
  ...state.slice(0, action.index),
  ...state.slice(action.index + 1) // <--- need to actually skip what you want to remove
]

Answer 2

@Jack is correct. Another option would be to use Array.filter instead:

return state.filter( (item, index) => index !== action.index)

You might be interested in the new Structuring Reducers section of the Redux docs. In particular, the page on Immutable Update Patterns has some related examples.

Answer 3

If you want to remove multiple items, then you could work through your array backwards

 for (var i = this.props.items.length -1; i >= 0; --i) {
   if(this.props.items[i]["selected"]) {
     this.props.deleteSelectedItem(i);
   }
 }