选择项目时更新项目列表

Question

我正在构建一个具有侧边栏和主要区域布局的React / Redux实时聊天应用程序。侧边栏包含一个传入请求列表，可以选择这些请求以显示主区域中聊天的预览。选择项目后，将创建套接字连接，并且应用程序将提取聊天预览。 但是，当单击按钮接受聊天时，将呈现新视图，该视图将显示有关所选项目的更多信息，并且可以执行更多操作，例如继续对话。 所选项目也将从传入请求列表中删除。

我尝试将所选项目的ID存储在一个数组中，并根据该数组更新侧边栏。当单击一个项目时，项目的ID将被分派到reducer，它会过滤会话对象，该对象返回在主区域中呈现的所选项目。

但是，在接受聊天后，我无法更新传入请求的列表，因此仍然可以预览和接受剩下的唯一项目，并且当有新的传入请求时，列表也可以更新。 / p>

如何构建我的Redux商店以有效地管理这种情况。

最终结果示例：jivochat.com代理区域。

感谢。

Answer 1

您可以按如下方式实现此行为：

• ＆＃34;接受聊天＆＃34;主区域中的按钮调用操作。
• 聊天列表reducer应该处理此操作。
• 聊天列表reducer维护三个数组：
  • incomingChatRequests（通过websocket或AJAX接收的对象列表）
  • acceptedChatRequestIDs（点击＆＃34;接受聊天＆＃34;为此数组添加元素）
  • pendingChatRequests（计算：incomingChatRequests.filter(req => !acceptedChatRequestIDs.includes(req.ID)）
• 组件侧边栏聊天列表应呈现pendingChatRequests。

Answer 2

单击聊天项后，您应该向reducer发送操作以从redux数据存储中删除该项。此外，如有必要，请拨打api电话。

您应该使用redux存储状态来呈现项目而不是组件的状态以反映此更改。