Redux Reducer: отфильтровывать дублирующиеся объекты?

Question

У меня есть groceryReducer, куда я добавляю groceryItems. Формат каждого объекта, добавляемого в массив groceryItems, указан ниже. Я пытаюсь использовать метод массива newSet, но он все еще добавляет их, а не отфильтровывает дубликаты. Что я делаю не так?

groceryObject

{
  title: "Chorizo Turkey Chili",
  subtitle: "Soup/Stew"
}

groceryReducer

// Action Type: Add Grocery Item
case 'ADD_GROCERY_ITEM': {

  return {
    ...state,
    groceryItems:  Array.from(new Set(state.groceryItems.concat(action.groceryObject))),

  }
}

console.log

groceryItems: Array(4)
  0: {title: "Chorizo Turkey Chili", subtitle: "Soup/Stew"}
  1: {title: "Chorizo Turkey Chili", subtitle: "Soup/Stew"}
  2: {title: "Chorizo Turkey Chili", subtitle: "Soup/Stew"}
  3: {title: "Chorizo Turkey Chili", subtitle: "Soup/Stew"}

Answer 1

Объект Set будет сохранять уникальные ссылки , он не сравнивает свойства объекта.

Один из способов сделать это sh это создать набор заголовков и сравнивая их.

case 'ADD_GROCERY_ITEM': {
  const titles = new Set(state.groceryItems.map(item => item.title));
  if (titles.has(action.groceryObject.title)) {
    // Already exists in state, don't add
    return state;
  }
  // doesn't exist in state, add it!
  return {
    ...state,
    groceryItems: state.groceryItems.concat(action.groceryObject)
  }
}