Закрытие диалогового окна, если отправка запроса прошла успешно

Question

Я использую React, Redux, NodeJS и ExpressJS. Я также использую материал-интерфейс для интерфейса. Я создал диалог, в котором пользователи могут вводить информацию и зарегистрироваться. Как только пользователь нажимает кнопку «Отправить», создается запрос на публикацию. Любые ошибки, которые будут возвращены, будут помещены в объект ошибок в состоянии. Если возвращаются какие-либо ошибки (например, пароли не совпадают), они указываются под полем ввода. Если кнопка отправки нажата и ошибок нет, диалоговое окно остается открытым. Как сделать, чтобы диалоговое окно было закрыто, если не возвращено никаких ошибок (state.open должен быть установлен в false). Как бы я это сделал? Вот мой код:

authActions.js:

export const registerUser = (userData, history) => dispatch => {
  axios
    .post("/api/users/register", userData)
    .then(res => history.push("/signup/done"))
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

signup.js:

class SignUpD extends Component {
  constructor() {
    super();
    this.state = {
      open: false,
      username: "",
      email: "",
      password: "",
      password2: "",
      errors: {}
    };
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  componentDidMount() {
    if (this.props.auth.isAutenticated) {
      this.props.history.push("/");
    }
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false, errors: {} });
  };

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();

    const newUser = {
      username: this.state.username,
      email: this.state.email,
      password: this.state.password,
      password2: this.state.password2
    };

    this.props.registerUser(newUser, this.props.history);
  }

  render() {
    const { errors } = this.state;

    return (
      <div>
        <ListItem
          button
          style={{ paddingTop: 60, top: 0 }}
          onClick={this.handleClickOpen}
        >
          <ListItemText primary="Sign Up" />
        </ListItem>
        <Dialog
          fullWidth
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="form-dialog-title"
          style={{ width: "100" }}
        >
          <DialogTitle id="form-dialog-title">Register</DialogTitle>

          <DialogContent>
            <DialogContentText>
              Enter registration details here
            </DialogContentText>
            <TextField
              margin="dense"
              name="email"
              label="Email Address"
              value={this.state.email}
              fullWidth
              onChange={this.onChange}
            />
            {errors.email && <div style={{ color: "red" }}>{errors.email}</div>}
            <TextField
              margin="dense"
              name="username"
              label="Username"
              type="text"
              value={this.state.username}
              fullWidth
              onChange={this.onChange}
            />
            {errors.username && (
              <div style={{ color: "red" }}>{errors.username}</div>
            )}
            <TextField
              margin="dense"
              name="password"
              label="Password"
              type="password"
              value={this.state.password}
              fullWidth
              onChange={this.onChange}
            />
            {errors.password && (
              <div style={{ color: "red" }}>{errors.password}</div>
            )}
            <TextField
              margin="dense"
              name="password2"
              label="Enter Password Again"
              value={this.state.password2}
              type="password"
              fullWidth
              onChange={this.onChange}
            />
            {errors.password2 && (
              <div style={{ color: "red" }}>{errors.password2}</div>
            )}
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.onSubmit} color="primary">
              Register
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

SignUpD.propTypes = {
  registerUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(
  mapStateToProps,
  { registerUser }
)(withRouter(SignUpD));

Если вам нужны какие-либо разъяснения или есть вопросы, дайте мне знать. Заранее спасибо.

Answer 1

Вместо того, чтобы использовать локальное состояние компонента, чтобы определить, должен ли быть открыт диалог, используйте redux store. Таким образом, вы можете вызвать действие, чтобы обновить магазин из любого места, и, таким образом, контролировать, если диалог открыт.

Точно так же, как вы определяете registerUser в mapDispatch для реквизитов, вы можете определить другое действие, которое отправляет что-то вроде {type:'OPEN_DIALOG'}, затем в вашем редукторе вы можете ответить на событие OPEN_DIALOG, установив state.dialogIsOpen в значение true. Затем в вашем mapStateToProps убедитесь, что вы включаете dialogIsOpen из состояния избыточности. И измените в любом месте, где используется this.state.dialogIsOpen, чтобы быть this.props.dialogIsOpen