>没有商店
在这种方法中,我创建一个具有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,即使我没有任何通知.
通过通知,通知操作创建者将负责在设定的时间段之后创建删除通知操作.您也可以在通知上单击一个x按钮,当单击此按钮时,会创建该操作,而这些按钮将转到存储,如果该项目存在则删除该项目,并且依赖该存储库的任何/所有视图都将更新.当我说任何/所有,我的意思是通知组件可能被隐藏,或者可能有另一种方法来查看应用程序的一个页面上的通知,或者可能有一个简单的计数器与应用程序的任何地方的通知数量.
旁注：不要以一种方式传递元素,使它们可以被多次渲染.如果需要提前指定组件,则通过{component：SuccessNotification,props：props}.
