Question

我在我的应用程序中使用了React和Redux。我想在我的应用中显示confirmationDialog，我希望它能够从某个组件触发操作，它会更新我的redux状态，然后confirmationDialog会听取国家并开放自己。 confirmationDialog的代码是：

import React from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';

import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';
import {hideConfirmationDialog} from '../../../actions/globalActions';
import {getConfirmationDialogState} from '../../../selectors/globalSelectors';

/**
 * A modal dialog can only be closed by selecting one of the actions.
 */
class DialogBox extends React.Component {
  render() {
    const props = this.props,
      actions = [
        <RaisedButton
          label={props.cancelLabel}
          secondary
          onClick={props.onCancel}
        />,
        <RaisedButton
          label={props.submitLabel}
          primary
          onClick={props.onSubmit}
          className="ml-4"
        />,
      ];

    return (
      <Dialog
        title={props.title}
        actions={actions}
        modal
        autoScrollBodyContent={props.autoScrollBodyContent}
        open={props.show}
      >
        {props.message || props.children}
      </Dialog>
    );
  }
}

DialogBox.propTypes = {
  onCancel: PropTypes.func,
  onSubmit: PropTypes.func,
  show: PropTypes.bool,
  submitLabel: PropTypes.string,
  cancelLabel: PropTypes.string,
  autoScrollBodyContent: PropTypes.bool,
};

DialogBox.defaultProps = {
  submitLabel: __('Submit'),
  cancelLabel: __('Cancel'),
  autoScrollBodyContent: true,
};

const ConnectedConfirmationDialog = connect(getConfirmationDialogState, { hideConfirmationDialog })(DialogBox);

export default ConnectedConfirmationDialog;

export {DialogBox};

这里getConfirmationDialogState是一个从我的reducer获取确认对话框状态的选择器。

我将确认对话框称为：

showDialog({
            title: 'Delete Entities',
            message: 'Delete selected entities',
            onSubmit: _.noop,
            onCancel: _.noop,
          });

showDialog函数在util中定义，其中dispatch和行动可以：

const buildConfirmationDialogAction = ({ title, message, onSubmit, onCancel }) => (
  Store.dispatch(showConfirmationDialog({
    onSubmit,
    title,
    onCancel,
    message,
  }))
);

export const showDialog = params => buildConfirmationDialogAction(params);

相应的操作将更新状态。状态正在更新，但我的组件中的getConfirmationDialog未被调用，并显示组件未重新呈现。我现在不知道为什么连接没有收听mapStateToProps。

Answer 1

我没有在app文件中呈现确认对话框。由于组件未呈现，因此不会侦听状态更新。所以，在起始文件中，我做了：

 render() {
    const that = this,
      props = that.props,
      alert = props.alert || {};

    return (
      <div className="h-100">
        <DocumentTitle title={DOORCERY_TITLE}>
          <MuiThemeProvider muiTheme={doorceryTheme}>
            <div className="h-100">
              <ConfirmationDialog
                show={false}
              />
              {props.children}
            </div>
          </MuiThemeProvider>
        </DocumentTitle>
      </div>
    );
  }

连接没有监听React组件中的状态更新

1 个答案: