Need to delete item from array using redux

Question

so I have a reducer that is adding to array create reducer :

export default (itemsList = [], action) => {
    if (action.type === 'ADD_ITEM') {
        return [...itemsList, action.payload]
    }
    return itemList
}

deleting reducer (99% that something is wrong here, but I have no idea what ):

export default (itemList = [], action) => {
    if (action.type === 'DELETE_ITEM') {
        return [...itemList, itemList.filter(item => item !== action.payload)]
    }
    return itemList
};

action/index.js:

export const addItemToList = item => {
    return {
        type: 'ADD_ITEM',
        payload: selectedItem
    }
};

export const deleteItemFromList = item => {
    return{
        type: 'DELETE_ITEM',
        payload: selectedItem
    }
};

let say I have itemList = [ 'abc', 'xyz', 'qwe' ]

and I want to use deleteItem('xyz') to delete 'xyz' from itemList

problem is that still nothing is happening. it doesnt delete the value from array and still i dont know what to do ... — z99y
– z99y, Commented May 4, 2019 at 20:20
what are the elements of the array? is it a primitive or an object? if an object can you write out its structure and what is the value of the payload, meaning what property are you targeting? — KT-mongo
– KT-mongo, Commented May 4, 2019 at 20:38
I have a dropdown that user can select multiple options and the selected values are in array as a strings. Then im showing user the values that he picked with button that schould delete them when user click on it. Buton is working fine. I bind key to the button and when im using console.log(key) it shows right key, but when I want to delete it, nothing is happening. — z99y
– z99y, Commented May 4, 2019 at 21:05

Shubham Khatri · Accepted Answer · 2019-05-04 17:38:02Z

1

While deleting you just need to return the filtered list and not use spread operator too.

export default (itemList = [], action) => {
    if (action.type === 'DELETE_AUTHOR') {
        return itemList.filter(item => item !== action.payload)
    }
    return listOfAuthorsSelected
};

answered May 4, 2019 at 17:38

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

z99y Over a year ago

Sadly im trying all the time and cant make it work at all

Anand Singh · Accepted Answer · 2019-05-04 17:54:57Z

0

Array.filter() returns a new array with given filter condition and not mutate the existing array. You don't have need to use ...itemList(spread operator). Here you are actually adding a sub array each time.

Here is a simple running example

var array1 = ["abc", "def" , "ghi"];

var array2 = [...array1, array1.filter((item) => {
return item !== "def"
})];

document.write(array2);


// correct way to filter
var array3 = ["abc", "def" , "ghi"];

var array4 = array3.filter((item) => {
return item !== "def"
});

document.write("<hr/>"+array4);

answered May 4, 2019 at 17:54

Anand Singh

2,3731 gold badge25 silver badges36 bronze badges

Collectives™ on Stack Overflow

Need to delete item from array using redux

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related