Начинающий Redux / React - Добавить отдельный элемент, если не в состоянии

Question

Я пытаюсь добавить один элемент в мое вложенное состояние Redux, если этого элемента еще нет в списке.

Мне все равно, делать это на обычном JS, я хочуRedux sauce of.

Мое состояние выглядит следующим образом:

  state: {
    data: {
      list: []
    },
  },

Вот что я пробовал в своем редукторе:

  return {
    ...state,
    data: {
      ...state.data,
      list: [action.payload.list, ...state.data.list]
    }
  }

Проблема в том, что иногда яхочу добавить уже в массиве, поэтому у меня есть дубликат в моем списке (который я не хочу).

Как добавить элемент в свой список, сначала проверив, есть ли этот элемент там?

Answer 1

Элемент не будет дублироваться и всегда с индексом 0,

return {
    ...state,
    data: {
      ...state.data,
      list: [].concat(action.payload.list, state.data.list.filter(val=>val.id==action.payload.list.id))
    }
  }

Answer 2

Вы можете использовать метод some.Он вернет true или false и прекратит итерацию по массиву, как только будет найдено совпадение.Пример:

case SOME_ACTION: {
  // iterate over the list and compare given item to item from action
  const existsInArray = state.data.list.some(l => l.id === action.payload.list.id)
  if(existsInArray) {
    return state;
  }

  return {
    ...state,
    data: {
      ...state.data,
      list: [action.payload.list, ...state.data.list]
    }
  }
}

РЕДАКТИРОВАТЬ:

Вы написали в комментарии, что если элемент существует в массиве, который вы хотите сделать, это будет первый элемент в списке.Я бы отфильтровал этот элемент (если он существует) и затем вернул элемент из действия в качестве первого элемента:

case SOME_ACTION: {
  // filter out the element
  const copyOfArray = state.data.list.filter(l => l.id !== action.payload.list.id)
  // put to the beginning of the array
  copyOfArray.unshift(action.payload.list);

  return {
    ...state,
    data: {
      ...state.data,
      list: copyOfArray
    }
  }
}