Предотвращение повторяющихся записей в моей логике редуктора

Question

Когда в пользовательский интерфейс добавляется новый пользователь, я запускаю действие NEW_USER, которое затем обновляет мое хранилище редуксов.

Это работает, но проблема в том, что всякий раз, когда создается новый пользователь, существует соединение веб-сокета, которое отправляет обновление в реальном времени о том, что был создан новый пользователь. Затем снова запускается действие NEW_USER, которое вставляет пользователя 2 раза.

Как я могу предотвратить вставку пользователя 2 раза в мое свойство состояния state.users? В настоящее время вы можете видеть, что я просто добавляю в коллекцию state.list.users. Не уверен, как проверить наличие в этой функции уменьшения.

switch (action.type) {
    case 'NEW_USER':
      return {
          ...state,
          users: state.lists.reduce((acc, list) => {
                if(list.id === action.list_id) {
                    return [
                       ...acc,
                       {
                         ...list,
                         users: [...list.users, action.user]
                       }
                     ]
                  } else {
                   return [...acc, list]
                  }
              }, []),          
      };

Answer 1

Я согласен с Александром в том, что коренная причина проблемы, по-видимому, связана с отправкой действия «Новый пользователь», но чтобы ответить на ваш вопрос, я предлагаю изменить форму состояния редуктора, чтобы она была более нормализованной. Создание карты пользователей по идентификатору и, если требуется порядок итераций, массив пользовательских идентификаторов. И чтобы решить проблему с дублирующимися записями, вы должны либо отфильтровать идентификатор пользователя из действия, а затем объединить идентификатор (удалить дубликат и добавить идентификатор), либо проверить, существует ли, а не concat, если он существует ( используя что-то вроде userIds.some(id => id === action.user.id to check if the id is in the array)

В документах по редуксу имеется хорошая документация по нормализации формы состояния: https://github.com/reactjs/redux/blob/master/docs/recipes/reducers/NormalizingStateShape.md