0

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

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

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

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

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

谢谢。

4

2 回答 2

0

单击聊天项目后，您应该向 reducer 发送一个操作以从 redux 数据存储中删除该项目。此外，如有必要，请进行 api 调用。

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

于 2018-06-01T09:24:46.763 回答
0

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

  • 主区域中的“接受聊天”按钮调用一个动作。
  • 聊天列表缩减器应处理此操作。
  • 聊天列表 reducer 维护三个数组：
    • incomingChatRequests（对象列表，通过 websocket 或 AJAX 接收）
    • acceptedChatRequestIDs（单击“接受聊天”将元素添加到此数组）
    • pendingChatRequests (计算: incomingChatRequests.filter(req => !acceptedChatRequestIDs.includes(req.ID))
  • 组件侧边栏聊天列表应呈现pendingChatRequests。
于 2018-06-01T08:29:08.070 回答