Question

我正在努力了解Flux和Reactjs。

考虑以下非常简单的情况：

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

ActionCreator.publishAnnouncement(this.state.announcement);

在我的表单组件中调用

。这就是publishAnnouncement方法的样子：

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

AnnouncementAPI只是一个AJAX http POST调用的包装器。这需要两次回调 - 成功和失败。

现在：我需要在屏幕上显示通知/吐司 - 表示成功或失败。 你会如何以通量方式做到这一点？

我正在考虑创建Notification组件并在我的表单中呈现它。如下所示：

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

但是如何处理这些回调？我应该创建监听ANNOUNCEMENT_PUBLISHING_SUCCEEDED和ANNOUNCEMENT_PUBLISHING_FAILED事件的NotificationStore吗？为了对这些事件做出反应，商店会发出CHANGE事件，从而更新我的通知。

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

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

总结： 你会如何实现这个？或许这样的项目存在？如果是这样，我在哪里可以找到它？

Answer 1

我没有看到专门用于通知商店的任何问题，特别是如果您想要在计时器上显示/隐藏通知，显示多个通知等逻辑

有两种方法可以考虑写这个：

将NotificationStore直接绑定到您关心的成功/失败回调，就像您在问题中提到的那样。不确定你正在使用什么通量实现，所以这将是伪代码。

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

Answer 2

在refs的辩护中（以及作为链接的GitHub仓库的作者）：你的商店可以在他们改变时发出一个事件，这将在组件中有一个处理程序。然后，此处理程序将通过ref触发通知。如果你的组件通过refs而不是props来处理通知，那就不那么复杂了。

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

2 个答案: