remove specific element from array with duplicate react-redux

问题

well, I have this reducer which has 2 actions: add an item and remove the item. add item work fine but the problem is with remove item, when I use filter method it will remove all items with the same name(duplicate), but I want to remove only the clicked element.

I tried to use splice method by passing the item index as payload instead of a name, creating new array same as basket items and applying splice method to this array but the problem is when I assign the new array to basket items it changes but doesn't re-render the items!

hope anyone can help thank u!

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;

回答1:

It is fine to use splice as long as you restructure the array using the spread operator. Your reducer can be expressed as follows using this syntax.

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;

With this method, the payload has to be the index to splice at. Note that there is no purpose to using else statements as the return statement will end execution when the action type matches.

回答2:

Relying on their index + splice may introduce unintended bugs. For example, if you render the items sorted in order, that differ from their initial state.

I would recommend you to assign a unique identifier to your items initially and later use the filter function, in order to remove the item by id.

Initially, you can assign an id to all the items using their index (it's an option to use UUID for id too):

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


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

来源：https://stackoverflow.com/questions/56562006/remove-specific-element-from-array-with-duplicate-react-redux

标签

javascript

reactjs

redux