使用后续操作作为有效负载调度Redux操作,以显示材料UI的快餐栏或对话框

Question

我正在使用React with 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,应调度启动同步的操作(作为props传递给组件).使用对话框时问题非常相似.因此,不仅要显示的文本而且还必须将下一个可能的操作传递给组件.

您是否认为使用Redux这样可以,还是有更好的解决方案？

Answer 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'
                  : '',
     }
   )
   

3. 和一个组件（使用装饰器代替类）：

   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。