分派一个 Redux 动作，将后续动作作为负载显示 Material UI 的快餐栏或对话框

Question

我正在使用 React 与 Redux 和 Material UI 来构建一个网络应用程序。 Web 应用程序由多个页面和组件组成。我知道 snackbar 或 dialog 应该直接连接到用户正在做的事情。但是，我想让 snackbar 和 dialog 独立于页面和组件。因此，一个用例正在显示一条消息 background synchronization of your data failed 和一个操作 retry now。我的想法是在名为 RootFrame 的页面上呈现 snackbar，该页面用于包装所有其他页面并将 snackbar 的文本作为操作的有效负载进行分派。

我的显示小吃店的 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 被关闭时，一个动作会改变状态中的一个变量：snackbar.visible = false。这用于激活 snackbar（它在 snackbar.visible === true 时呈现）。当用户点击 retry now 时，启动同步的动作（作为 props 传递给组件）应该被调度。使用对话框时问题非常相似。因此，不仅要显示的文本，而且接下来可能的操作都必须传递给组件。

你觉得这样用Redux好还是有更好的方案？

Answer 1

实际上，现在 usign redux 发生了一些变化。我们使用 redux-act 中的 createAction，正确地我们进一步使用 createReducer。在组件中，我们使用 react-redux 中的连接装饰器或 class。 Connector 提供 redux state、dispatched actions、parent props。所以对于我们的小吃店，我们有：

操作：

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

和一个组件（使用装饰器而不是class）：

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。

分派一个 Redux 动作，将后续动作作为负载显示 Material UI 的快餐栏或对话框

Dispatch a Redux action with the subsequent action as payload to show a snackbar or dialog of Material UI

javascript

reactjs

react-jsx

redux

material-ui