需要使用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

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

Answer 2

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