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.

Try surrounding state.slice with brackets to be sure it doesn't do decomposition first — VanDavv
– VanDavv, Commented Oct 27, 2016 at 21:48

Jack · Accepted Answer · 2016-10-27 21:50:38Z

5

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
]

answered Oct 27, 2016 at 21:50

Jack

21.3k12 gold badges51 silver badges48 bronze badges

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

1 Comment

Paulos3000 Over a year ago

Oh man. How did I miss that. I actually had it working before, but obviously changed that part without realising... Thanks for pointing it out! :)

markerikson · Accepted Answer · 2016-10-27 22:16:16Z

1

@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.

answered Oct 27, 2016 at 22:16

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Comments

Dazzle · Accepted Answer · 2018-06-15 18:18:50Z

0

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);
   }
 }

edited Jun 15, 2018 at 18:18

answered Jun 15, 2018 at 17:53

Dazzle

3,1254 gold badges31 silver badges53 bronze badges

Collectives™ on Stack Overflow

Redux reducer failing to remove array element

Define argument:

Function Call:

Action:

Reducer:

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Define argument:

Function Call:

Action:

Reducer:

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related