Модалы и уведомления - это компоненты, которые добавляются к телу. Поэтому они работают немного иначе, чем обычные компоненты. В моем приложении я могу представить два способа их реализации, и я не уверен, какой из них лучше.
- Нет магазинов
В этом подходе я создаю класс NotificationHelper, который имеет метод create. Внутри этого я создаю новый контейнер node, присоединяем его к телу, а затем вызываем 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 в начале моего приложения, хотя на данный момент у меня нет никаких уведомлений.
