Отправляйте действие Redux с последующим действием в качестве полезной нагрузки, чтобы показать закусочную или диалоговое окно Material UI

Я использую 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 это нормально или есть лучшее решение?

Ответы

Ответ 1

Собственно, прямо сейчас уководство по сокращению было немного изменено. Мы используем createAction из redux-act, мы также используем createReducer. В компоненте мы используем декоратор или класс connect из react-redux. Коннектор обеспечивает состояние редукции, отправленные действия, родительские реквизиты. Итак, для нашей закуски у нас есть:

  • действия:

    export const showMessageTop = createAction();
export const closeMessageTop = createAction();

  • Разбавление:

    import {createReducer} from 'redux-act';
import * as ac from '../actionCreators/messageTop';
export default createReducer(
  {
    [ac.showMessageTop]: (state, messageText) => ({messageText}),
    [ac.closeMessageTop]: () => ({messageText: ''}),
  },
  {
    messageText: window.location.search === '?login=1'
               ? 'Welcome'
               : '',
  }
)

  • И компонент (используйте декоратор вместо класса):

    import {closeMessageTop} from '../../actionCreators/messageTop'; 
import MessageTop from './MessageTop';
@connect(state => ({
  // gettext: gettext(state.locale.messages),
  messageText: state.messageTop.messageText,
}))
export default class MessageTopContainer extends React.Component {
...
<button onClick={...bindActionCreators({onClose: closeMessageTop}, dispatch)}/>

Итак, в текущих реквизитах this.props.messageText. И мы можем показать этот бар, если у нас есть сообщение, или мы можем вызвать closeAction, который устанавливает messageText в пустой строке.