Я использую React с Redux и Material UI для создания webapp. Webapp состоит из нескольких страниц и компонентов. Я знаю, что закусочная или диалог должны быть напрямую связаны с тем, что делает пользователь. Однако, я хотел бы сделать snackbar и диалог независимым на страницах и компонентах. Поэтому в прецеденте отображается сообщение типа background synchronization of your data failed
и действие retry now
. Моя идея состояла в том, чтобы сделать snackbar на странице под названием 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 это нормально или есть лучшее решение?