Remove current array element from Redux array

Question

Here is my reducer

const initialState = {
  pros: [''],
}

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_ADD_PROS:
      return {
          ...state.pros,
          pros: [...state.pros,  action.payload]
        }

    case ACTION_CHANGE_PROS:
      return update(state, { 
        pros: { 
          [action.index]: {
            $set: action.payload
          }}
      });

    case ACTION_REMOVE_PROS:   

   ???


      return x
    default:
  }
  return state;
};

Can some one help me how can I remove current item from array? I have tried many ways but I don't understand what the problem here, also I have used react-addons-update for update store

you are removing an item based on id? or just the last or first one? — Sagiv b.g
– Sagiv b.g, Commented Sep 28, 2018 at 14:54

Sagiv b.g · Accepted Answer · 2018-09-28 15:39:15Z

4

I think that Array.prototype.filter would be the most easy and readable solution to remove an item from an array:

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

edited Sep 28, 2018 at 15:39

answered Sep 28, 2018 at 15:28

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

Comments

Ion Utale · Accepted Answer · 2018-09-29 08:44:31Z

1

i think this should do the trick ( haven't tested )

you need to create a copy of the array, remove the item, and then assign the new array to the state

const initialState = {
pros: [''],
}

export const rootReducer = (state = initialState, action) => {
switch (action.type) {
    case ACTION_ADD_PROS:
    return {
        ...state.pros,
        pros: [...state.pros,  action.payload]
        }

    case ACTION_CHANGE_PROS:
    return update(state, { 
        pros: { 
        [action.index]: {
            $set: action.payload
        }}
    });

    case ACTION_REMOVE_PROS:
    // make a copy of the array
    const newArr = state.pros
    // remove item at index 4
    newArr.splice(newArr.indexOf(action.payload), 1)   

    return update(state, {
           pros: [...newArr]
    })

   //this is the old code that is incorrect
   /* return update(state, { 
        pros: { 
        [action.index]: {
            $set: newArr
        }}
    });/*


    return x
    default:
}
return state;
};

for more information about the array.splice()

Remember: NEVER EDIT THE STATE DIRECTLY. the state needs to be immutable

edit: the return method was wrong, please try this one edit: as from your comment, i corrected the newArr also now it should remove the "current" value from the array basically you wan't to edit the copy of the array and then just assign the smaller array

edited Sep 29, 2018 at 8:44

answered Sep 28, 2018 at 14:50

Ion Utale

7181 gold badge13 silver badges25 bronze badges

2 Comments

HDallakyan Over a year ago

It's not helped, maybe with ACTION_ADD_PROS something wrong?

HDallakyan Over a year ago

also the action.payload is the current value of INPUT and not array

dance2die · Accepted Answer · 2018-09-28 14:58:00Z

0

Instead of spliceing, just slice the array before the index, after the index, and return the combined array.

It'd keep the original array untouched

  [
    ...state.pros.slice(0, action.index),
    ...state.pros.slice(action.index + 1)
  ]

answered Sep 28, 2018 at 14:58

dance2die

37.2k39 gold badges137 silver badges199 bronze badges

Collectives™ on Stack Overflow

Remove current array element from Redux array

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related