reactjs - facebook 喜欢 React JS 中的通知和 redux 依赖通知图标？

Question

我正在开发基于 React 的 Web 应用程序。我想向用户显示通知，例如每当用户收到好友请求以及用户确认他/她的好友请求等时。

我想实现一个通知系统，其通知计数与 Facebook 今天的完全一样。当用户点击通知图标时，它应该在下拉列表中显示通知列表。我不知道如何实现这个以及从哪里开始。

现在，当用户点击标有红色的 + 图标时，我添加了好友功能，好友请求将发送给收件人 我正在调用 backed 并发送添加好友请求信息，如下所示

  AddFriend(loginId){
var url = window.location.href;
var params = url.split('/');
let friendId = params[3];
let data = {}
data.loginId = loginId;
data.friendId = friendId;
this.props.submitFriendRequest(data)

在数据库中我存储为

{ "_id" : ObjectId("5a5d883c66bd54040c4808af"), "updatedAt" : ISODate("2018-01-16T05:06:04.997Z"), "createdAt" : ISODate("2018-01-16T05:06:04.997Z"), "requester" : "5a4a0c0c13aa6120980ab532", "recipient" : "5a4d033a2d2c6b2264bf8120", "status" : 1, "__v" : 0 }

现在我想向收件人显示一条通知，例如您在通知中收到了来自 xxx 的好友请求，如图中的计数

我正在使用 Reactjs、redux、material UI、Node.js、Mongodb。关于从哪里开始显示通知的任何建议？是否有任何 reactjs npm 模块？我不期待完整的代码，而是寻找建议。谢谢

Answer 1

如果你能提供你的尝试就太好了。但如果你还没有尝试。我想唯一的方法是在您的客户端和服务器之间建立一个 socket 连接。

您正在使用 redux 和 node.js。可能你可以使用 socket.io 作为后端套接字连接，你可以使用 redux-socket.io用于建立与后端 socket.io 服务器的套接字连接。

https://github.com/ItsMrAkhil/Anonymous-Chat这是我对您正在使用的同一堆栈的用法。希望这对您有所帮助。