Beginner Redux/React - Add single item if not in state

Question

I'm trying to add a single item to my nested Redux state, if that item isn't already in the list.

I don't care about doing it in plain JS, I want the Redux sauce ofc.

My state looks like this:

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

This is what I tried in my reducer:

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

Problem is, sometimes the item I want to add is already in the array, therefore I have a duplicate in my list (which I don't want).

How can I add an item to my list while checking first if this item is already there?

Possible duplicate of [How do I check if an array includes an object in JavaScript?](https://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript) — Tomasz Mularczyk, Jun 02 '18 at 13:47

Tomasz Mularczyk · Answer 1 · 2018-06-02T14:02:48.283

4

You can use some method. It will return true or false and stop iterating over the array as soon as there is a match. Example:

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]
    }
  }
}

EDIT:

You wrote in a comment that if the element exists in the array you want to make that it will be the first item in the list. What I would do is filter out this element (if exists) and then put the item back from the action as the first element:

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
    }
  }
}

edited Jun 02 '18 at 14:02

answered Jun 02 '18 at 13:46

Tomasz Mularczyk

34,501
19
112
166

I'm getting `l is not defined` – mokiliii Lo Jun 02 '18 at 13:49
@mokiliiiLo sorry, updated. But the thing is you need to invent your own way to compare objects. That's just an example. – Tomasz Mularczyk Jun 02 '18 at 13:50
Thanks so much. Is there a way to place this element in the very first position in my list? – mokiliii Lo Jun 02 '18 at 13:51
Yes, but in the case of the item being already in the list, its position isn't changed. Is there a way to enforce the fact that the position, in the end, will always be 0? – mokiliii Lo Jun 02 '18 at 13:57

score 1 · Accepted Answer · answered Jun 02 '18 at 14:01

1

Element won't be duplicated and always at 0 index,

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

answered Jun 02 '18 at 14:01

Anurag Awasthi

6,115
2
18
32

Thanks, much cleaner! – mokiliii Lo Jun 02 '18 at 14:33
How we handle this without using concat()? – Oliver D Feb 26 '20 at 13:23

Beginner Redux/React - Add single item if not in state

2 Answers2