javascript - ReactJS + Flux - 如何实现 toasts/通知？

Question

我正在尝试了解 Flux 和 Reactjs。

考虑以下非常简单的场景:

您的表单输入很少。当用户提交表单时，

ActionCreator.publishAnnouncement(this.state.announcement);

在我的表单组件中被调用。这是 publishAnnouncement 方法的样子:

var publishAnnouncement = function (announcement) {
  AnnouncementAPI.publishAnnouncement(
    announcement,
    successCallback,
    failureCallback
  )
};

AnnouncementAPI 只是 AJAX http POST 调用的包装器。它需要两次回调——成功和失败。

现在:我需要在屏幕上显示通知/toast - 指示成功或失败。您将如何以 Flux 方式做到这一点？

我正在考虑创建 Notification 组件并将其呈现在我的表单中。像下面这样:

<Notification title={this.state.notification.title} message={this.state.notification.title} visible={this.state.notification.visibility}  // ?? onTimeExceeded ??     />

但是我该如何处理这些回调呢？我应该创建 NotificationStore 来监听 ANNOUNCEMENT_PUBLISHING_SUCCEEDED 和 ANNOUNCEMENT_PUBLISHING_FAILED 事件吗？作为对这些事件的 react ，store 发出 CHANGE 事件，因此我的 Notification 更新。

但即使我这样做了，我应该如何指示我的通知显示/隐藏？或者更糟的是，在 2 秒后出现并隐藏？

我在 GitHub 上看到了一些组件他们每个人都使用 refs 等，我个人不喜欢。

总结一下:您将如何实现？或者也许存在这样的项目？如果是这样，我在哪里可以找到它？

Answer 1

我不认为拥有一个专门用于通知的商店有什么问题，特别是如果您想要在计时器上显示/隐藏通知、显示多个通知等逻辑。

我会考虑两种写法:

1. 将 NotificationStore 直接绑定(bind)到您关心的成功/失败回调，就像您在问题中提到的那样。不确定您使用的是哪种 flux 实现，因此这将是伪代码。

   class NotificationStore {
     constructor() {
       this.notificationId = 0;
       this.notifications = {};
       this.bindActionType(
         CLEAR_NOTIFICATION,
         this.handleClearNotification
       );
       this.bindActionType(
         ANNOUNCEMENT_PUBLISHING_SUCCEEDED,
         this.handleAnnouncementPublishingSucceeded
       );
       // etc...
     }
   
     handleAnnouncementPublishingSucceeded(action) {
       this.addNotification("Success!", { timeout: 2000 });
     }
   
     handleClearNotification(action) {
       this.removeNotification(action.notificationId);
     }
   
     addNotification(message, options) {
       const nextId = this.notificationId++;
       const notification = {
         message: message
       };
   
       this.notifications[nextId] = notification;
       this.emit("change");
   
       // if we specified a timeout, remove the notification
       // after the timeout expires.
       if (options.timeout) {
         setTimeout(() => {
           dispatch(CLEAR_NOTIFICATION, {
             notificationId: nextId
           });
         }, options.timeout);
       }
     }
   
     removeNotification(notificationId) {
       delete this.notifications[nextId];
       this.emit("change");
     }
   }
   

2. 指定您希望在操作创建者中收到的通知。这更明确但不那么集中。

   var publishAnnouncement = function (announcement) {
     AnnouncementAPI.publishAnnouncement(
       announcement,
       (response) => {
         dispatch(ANNOUNCEMENT_PUBLISHING_SUCCEEDED, ...);
         dispatch(CREATE_NOTIFICATION, {
           message: "Success!",
           timeout: 2000
         });
       },
       (error) => {
         dispatch(ANNOUNCEMENT_PUBLISHING_FAILED, ...);
         dispatch(CREATE_NOTIFICATION, {
           message: "Failure!"
         });
       }
     )
   };
   

   在这种情况下，NotificationStore 看起来基本相同，但没有绑定(bind)到每个成功/失败操作。无论哪种情况，我都会在组件树顶部附近有一个通知小部件，用于呈现通知列表。