小编典典

调度Redux动作,并将其后的动作作为有效负载,以显示材质栏的小吃栏或对话框

reactjs

我正在将React与Redux和Material
UI结合使用来构建webapp。该webapp由多个页面和组件组成。我知道,小吃店或对话框应直接连接到用户正在执行的操作。但是,我想使小吃栏和对话框独立于页面和组件。因此,用例正在显示诸如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可以吗,还是有更好的解决方案?


阅读 266

收藏
2020-07-22

共1个答案

小编典典

实际上,现在usign redux进行了一些更改。我们使用createActionfrom redux- act,正确地我们createReducer进一步使用。在组件中,我们使用connect装饰器或的类react- redux。连接器提供redux状态,调度的动作,父项道具。因此,对于我们的小吃店,我们有:

  1. 动作:

    export const showMessageTop = createAction();
    

    export const closeMessageTop = createAction();

  2. 减速器:

        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'
                   : '',
      }
    )
  1. 和一个组件(使用装饰器代替类):
        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

2020-07-22