Обновить список элементов, когда элемент выбран

Question

Я создаю приложение реального чата React / Redux, которое имеет макет боковой панели и основной области.Боковая панель содержит список входящих запросов, которые можно выбрать для предварительного просмотра чата в основной области.При выборе элемента создается сокетное соединение, и приложение извлекает предварительный просмотр чата.Однако при нажатии кнопки для принятия чата отображается новое представление, которое отображает дополнительную информацию о выбранном элементе с дополнительными действиями, такими как продолжение разговора.Выбранный элемент также удаляется из списка входящих запросов.

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

Однако я не смогобновите список входящих запросов после того, как чат будет принят, чтобы единственные оставшиеся элементы могли все еще быть просмотрены и приняты, и список мог также быть обновлен, когда есть новые входящие запросы.

Как мне структурировать мое хранилище Reduxдля эффективного управления этой ситуацией.

Примеры конечного результата: область агента jivochat.com.

Спасибо.

Answer 1

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

Для отображения элементов следует использовать состояние избыточного хранилища, а не состояние компонента, чтобы отразить это изменение.

Answer 2

Вы можете реализовать это поведение следующим образом:

• Кнопка «принять чат» в основной области вызывает действие.
• редуктор списка чатов должен обрабатывать это действие.
• редуктор списка чатов поддерживает три массива:
  • incomingChatRequests (список объектов, полученных через websocket или AJAX)
  • acceptedChatRequestIDs (нажмите «принять чат» добавляетэлемент в этот массив)
  • pendingChatRequests (вычислено: incomingChatRequests.filter(req => !acceptedChatRequestIDs.includes(req.ID))
• список чата на боковой панели компонента должен отображать pendingChatRequests.