Я использую React с Redux и Material UI для создания веб-приложения. Веб-приложение состоит из нескольких страниц и компонентов. Я знаю, что закусочная или диалог должны быть напрямую связаны с тем, что делает пользователь. Однако я бы хотел, чтобы закусочная и диалог были независимыми от страниц и компонентов. Таким образом, вариант использования отображает сообщение типа background synchronization of your data failed и действие retry now. Моя идея заключалась в том, чтобы отобразить панель закусок на странице с именем RootFrame, которая используется для обертывания всех других страниц и отправки текста панели закусок в качестве полезной нагрузки действия.
Мое действие Redux для отображения закусочной:
export function showSnackbar(message: string) {
return {
type: SHOW_SNACKBAR,
payload: message
};
}
Конечно, было бы неплохо указать сообщение в действии вместо того, чтобы принимать сообщение в качестве аргумента, но сейчас это не моя проблема. Проблема в следующем: как я могу использовать эту систему и отображать снэк-бар с действием? Могу ли я изменить свое действие на
export function showSnackbar(message, action) {
return {
type: SHOW_SNACKBAR,
payload: {
message,
action
}
};
}
и отобразить мою закусочную в RootFrame лайке
<Snackbar
message={this.props.message}
ref='snackbar'
onDismiss={() => this.props.dispatch(dismissSnackbar())}
action='retry now'
onActionTouchTap={() => this.props.dispatch(this.props.action)}
/>;
Когда закусочная закрывается, действие изменяет переменную в состоянии: snackbar.visible = false. Используется для активации закусочной (отображается при snackbar.visible === true). Когда пользователь щелкает retry now, должно быть отправлено действие для запуска синхронизации (которое передается компоненту как реквизиты). Проблема очень похожа при использовании диалогов. Таким образом, компоненту необходимо передать не только отображаемый текст, но и следующие возможные действия.
Как вы думаете, можно ли использовать Redux таким образом или есть лучшее решение?
