удалить конкретный элемент из массива с помощью дубликата response-redux

Question

хорошо, у меня есть этот редуктор, который имеет 2 действия: добавить элемент и удалить элемент. Добавление элемента работает нормально, но проблема заключается в удалении элемента, когда я использую метод фильтра, он удалит все элементы с одинаковыми именами (дубликаты), но я хочу удалить только элемент, на который нажали.

Я пытался использовать метод сплайсинга, передавая индекс элемента в качестве полезной нагрузки вместо имени, создавая новый массив, такой же, как элементы корзины, и применяя метод сплайсинга к этому массиву, но проблема заключается в том, когда я назначаю новый массив элементам корзины, которые он меняет но не перерисовывает элементы!

надеюсь, кто-нибудь может помочь, спасибо!

import {ADD_ITEM,REMOVE_ITEM} from "./Actions-Type"
var initialState ={
    baskeitems:[" Strawberry"," Blueberry","Blueberry","Blueberry","Strawberry"]
};

function Rootreducer (state=initialState,action){
    if (action.type === ADD_ITEM) {
            return Object.assign({}, state, {
                baskeitems: state.baskeitems.concat(action.payload)
            })
}
else{
    if(action.type===REMOVE_ITEM){
        return Object.assign({}, state, {
            baskeitems: state.baskeitems.filter((item)=>{return(item!==action.payload)})
        })
    }
    else{
        return state;
    }
}

}
export default Rootreducer;

Answer 1

Допускается использование сплайсинга, если вы реструктурируете массив с помощью оператора spread .С помощью этого синтаксиса ваш редуктор может быть выражен следующим образом:

import {ADD_ITEM,REMOVE_ITEM} from "./Actions-Type"
var initialState ={
    baskeitems:[" Strawberry"," Blueberry","Blueberry","Blueberry","Strawberry"]
};

function Rootreducer (state=initialState,action){
    if (action.type === ADD_ITEM)
            return { ...state, baskeitems: [ ...state.baskeitems, action.payload ] }

    if(action.type===REMOVE_ITEM) {
            state.baskeitems.splice(action.payload, 1)
            return { ...state, baskeitems: [ ...state.baskeitems ] }
    }

    return state;
}

}
export default Rootreducer;

При использовании этого метода полезная нагрузка должна быть индексом для склеивания.Обратите внимание, что нет смысла использовать операторы else, поскольку оператор return завершит выполнение при совпадении типа действия.

Answer 2

Опираясь на их index + сращивания, могут появиться непреднамеренные ошибки.Например, если вы визуализируете элементы, отсортированные по порядку, которые отличаются от их исходного состояния.

Я бы порекомендовал вам назначить уникальный идентификатор вашим элементам сначала, а затем использовать функцию фильтра, чтобы удалитьitem by id.

Изначально вы можете назначить id всем элементам, используя их индекс (есть возможность использовать UUID для идентификатора тоже):

const basketitems = ["Strawberry", "Blueberry", "Blueberry", "Blueberry", "Strawberry"]


const initialState = {
  basketitems: basketitems.map((item, index) => ({ id: index, name: item }))
}