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

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

Это работает, но проблема в том, что всякий раз, когда создается новый пользователь, существует соединение с веб-сокетом, которое отправляет обновление в реальном времени о том, что новый пользователь был создан. Затем это снова запускает действие 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]
                  }
              }, []),          
      };

Вы должны отправлять это действие дважды? не могли бы вы просто отправить одну из них?

Asaf Aviv 27.10.2018 05:26
Затем это снова запускает действие NEW_USER, которое вставляет пользователя 2 раза. - Я не понимаю - почему это происходит? Похоже, что место (а), где отправляется действие, является наиболее важным кодом для ответа на этот вопрос ...
Alexander Nied 27.10.2018 05:44

@AlexanderNied действие запускается пользователем, выполняющим действие. На бэкэнде он отправляет полезные данные веб-сокета в пользовательский интерфейс, который затем отправляет другое действие в пользовательском интерфейсе (для функции в реальном времени)

Blankman 28.10.2018 16:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
205
1

Ответы 1

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

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

Другие вопросы по теме