Reactjs 选择项目时更新项目列表

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

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

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

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

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

---

谢谢。

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

• 主区域中的“接受聊天”按钮调用操作
• 聊天列表缩减器应处理此操作
• chat list reducer维护三个阵列：

  • incomingChatRequests

    （通过websocket或AJAX接收的对象列表）

  • AcceptedChatRequestId

    （单击“AcceptChat”将元素添加到此数组）
  • pendingChatRequests（计算：

    incomingChatRequests.filter（req=>！AcceptedChatRequestId.includes（req.ID）

    ）
• 组件侧栏聊天列表应呈现

  pendingChatRequests

---

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

---

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

这很有意义。但是，如果pendingChatRequestIDs数组仅包含ID，那么在单击聊天时如何显示预览？必须在某个地方有更多关于聊天的数据。聊天请求列表缩减器需要这些数据数据也是。`const initialState={incomingChatRequests:[]，acceptedChatRequestId:[]，pendingChatRequests:[]}；导出默认函数（state=initialState，action）{switch（action.type）{default:return state；}'这是我的初始状态，您建议我如何计算pendingChatRequests，因为它是初始状态对象的一部分？集合

pendingChatRequests

基本上定义为

incomingChatRequests

-

acceptedChatRequests

。聊天请求通过网络传入时会被推送到传入（websocket，AJAX）。点击“接受”按钮即可按下已接受的请求。将计算挂起。