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

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

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

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

Как мне структурировать свой магазин Redux, чтобы эффективно справиться с этой ситуацией.

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

Спасибо.


reactjs redux react-redux redux-thunk redux-actions
person Dave Kalu    schedule 01.06.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

  • Кнопка «принять чат» в основной области вызывает действие.
  • Редуктор списка чатов должен обрабатывать это действие.
  • chat list reducer maintains three arrays:
    • incomingChatRequests (list of objects, received through websocket or AJAX)
    • acceptedChatRequestIDs (нажмите «принять чат», чтобы добавить элемент в этот массив)
    • pendingChatRequests (вычислено: incomingChatRequests.filter(req => !acceptedChatRequestIDs.includes(req.ID))
  • список чатов на боковой панели компонента должен отображать pendingChatRequests.
person Freek Wiekmeijer    schedule 01.06.2018
comment
Это имеет большой смысл. Но если массив pendingChatRequestIDs содержит только идентификаторы, как мне отобразить предварительный просмотр при нажатии на чат? - person Dave Kalu; 01.06.2018
comment
Где-то должно быть больше данных о чатах. Редуктор списка запросов чата также нуждается в этих данных. - person Freek Wiekmeijer; 01.06.2018
comment
` const initialState = { incomingChatRequests: [], acceptChatRequestIDs: [], pendingChatRequests: [] }; функция экспорта по умолчанию (состояние = начальное состояние, действие) { переключатель (action.type) { по умолчанию: состояние возврата; } } ` Вот мой intialState, как вы предлагаете вычислять pendingChatRequests, поскольку он является частью объекта начального состояния? - person Dave Kalu; 01.06.2018
comment
Коллекция pendingChatRequests в основном определяется как incomingChatRequests - acceptedChatRequests. Запросы чата передаются во входящие по мере их поступления через сеть (веб-сокет, AJAX). Принятые запросы отправляются по нажатию кнопки принятия. Ожидание вычисляется. - person Freek Wiekmeijer; 04.06.2018

arrow_upward
0
arrow_downward

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

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

person tarun luthra    schedule 01.06.2018