如何在React Redux的basket中存储不重复的唯一条目？

问题根因 #

你当前使用的state.basket.indexOf(action.item) === -1判断逻辑为引用相等校验，仅当传入的action.item和数组中已存元素为完全相同的内存引用时才会判定为存在。如果每次添加操作传入的是新生成的用户对象，哪怕所有属性值完全一致，也会被判定为新元素，最终存入重复值。

修复方案 #

将引用比较改为基于用户唯一业务字段的等值比较，比如用户id、手机号等全局唯一标识，修正后的代码如下：

export const initialState = {
    basket: []
}

const reducer = (state, action) => {
    switch(action.type){
        case 'Add_To_New':
            // 可将此处的id替换为你实际使用的用户唯一标识字段
            const isUserExisted = state.basket.some(item => item.id === action.item.id)
            if (!isUserExisted) {
                return {
                    ...state,
                    basket: [...state.basket, action.item]
                }
            }
            return state
        default:
            return state
    }
}

export default reducer

参考截图 #

内容的提问来源于stack exchange，提问作者Ankit Kumar