在 React Flux 中实现模式和通知的最佳方式答案

【问题标题】：Best way to implement modals and notifications in React Flux在 React Flux 中实现模式和通知的最佳方式
【发布时间】：2015-02-16 10:34:06
【问题描述】：

Modals 和 Notifications 是附加到正文的组件。因此它们的工作方式与普通组件几乎没有什么不同。在我的应用程序中，我可以想到两种实现它们的方法，但我不确定哪一种更好。

没有商店

在这种方法中，我创建了一个具有 create 方法的 NotificationHelper 类。在其中，我创建了一个新的容器节点，将其附加到主体，然后调用 React.render(, container);

所以任何组件都可以调用 NotificationHelper.create() 并且它会创建一个通知。管理其生命周期并在计时器到期或有人单击关闭按钮时关闭的通知组件。

问题很多时候，我需要在页面上显示通知以响应 XHR 响应（成功或失败），所以在我的 actionCreator 中，我会有这样的代码

APIManager.post(url, postData).then(function(response) {
    NotificationHelper.create(<SuccessNotification />)
});

我不知道从呈现新组件的动作创建者中调用这样的东西是否正确。

有商店

另一种方法是创建一个 NotificationStore 并在 emitChange 上呈现通知组件。代码看起来像这样

在我的 App.js 中，代码将是

<body> 
    <Header />
    <Fooder />
   <NotificationContainer />
</body>

然后在 NotificationContainer 中，我会做类似的事情

onChange: function() {
    this.setState({customNotification: NotificationStore.get()});
},
render: function() {
    <Notification>
        {this.state.customNotification}
    </Notification>
}

最后，动作创建器看起来像

Dispatcher.dispatch({
   actionType: 'notification',
   component:  <MyComponent/>
});

这种方法的问题是商店的额外开销。商店在这里没有做任何有意义的事情，它只是为了跟随潮流。从动作创建者，我们将数据传递给存储，组件再次从存储中获取相同的数据并渲染它。因此，我们完成了通量周期，却没有真正从中得到任何东西。

另外，我现在需要在我的应用程序开始时初始化 NotificationContainer，即使此时我没有任何通知。

【问题讨论】：

标签： modal-dialog reactjs reactjs-flux

【解决方案1】：

我真的不明白你的问题是什么问题。它做的正是它应该做的事情，如果你以后需要在它的基础上进行构建，你可以很容易地做到这一点。在我看来，通知和其他非真正的组件所有者功能是使用 Flux 的最佳理由之一（90% 的情况下我不推荐 Flux）。

使用 Flux，通知操作创建者将负责在设定的时间段后创建删除通知操作。您还可以在通知上设置一个 x 按钮，单击该按钮会创建该操作，然后这些按钮会转到商店，如果该项目存在则将其删除，并且任何/所有视图都依赖于此商店更新。当我说任何/全部时，我的意思是通知组件可能被隐藏，或者可能有另一种方法可以在应用程序的一个页面上查看通知，或者可能有一个简单的计数器，显示应用程序中任何位置的通知数量。

旁注：不要以可以多次渲染的方式传递元素。如果您需要提前指定组件，请改为传递{component: SuccessNotification, props: props}。

【讨论】：

【解决方案2】：

我遵循 FakeRainBrigand 的回答。

对不起，这里是自我推销，但我创建了一个通知组件，您可以将其与 Flux 一起使用。这里可以看到shows a example of usage with Alt的一个issue，但是原理是一样的。您将组件添加到 HTML 上的顶级元素并将该组件订阅到通知存储。在您的通知操作创建器上，您可以添加具有一些属性的通知，例如：级别、位置、自动关闭、操作等。

Here is the component demo.

【讨论】：