ReactJS + Flux - 如何实现toasts/notifications？

Question

我正在尝试了解 Flux 和 Reactjs。

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

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

ActionCreator.publishAnnouncement(this.state.announcement);

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

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

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

现在：我需要在屏幕上显示 notification/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 事件吗？作为对这些事件的反应，store 发出 CHANGE 事件，因此我的 Notification 更新。

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

我在 GitHub 上看到的组件很少，每个组件都使用 refs 等，我个人不喜欢。

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

Answer 1

我不认为拥有一个专门用于通知的商店有什么问题，特别是如果你想要围绕 showing/hiding 定时器通知、显示多个通知等的逻辑

我会考虑两种写法：

将 NotificationStore 直接绑定到您关心的 success/failure 回调，就像您在问题中提到的那样。不确定您使用的是哪种通量实现，因此这将是伪代码。

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");
  }
}

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

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 看起来基本相同，但没有绑定到每个 success/fail 操作。在任何一种情况下，我都会在组件树顶部附近有一个通知小部件来呈现通知列表。

Answer 2

为 refs 辩护（并且作为链接 GitHub 存储库的作者）：您的商店可以在更改时发出一个事件，该事件将在组件中有一个处理程序。然后，此处理程序将通过 ref 触发通知。让您的组件通过 refs 而不是 props 处理通知要简单得多。

ReactJS + Flux - 如何实现toasts/notifications？

ReactJS + Flux - How to implement toasts/notifications?

javascript

flux

reactjs

reactjs-flux