facebook喜欢React JS和redux中的通知，还有通知图标？

Question

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

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

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

  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)

}

在DB中我存储为

{ "_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，材质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这是我对你正在使用的同一堆栈的使用。希望这会对你有所帮助。