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

小编典典

调度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状态，调度的动作，父项道具。因此，对于我们的小吃店，我们有：

动作：
```
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。

2020-07-22