在路线更改时反应开放模式

Question

我正在构建一个带有登录模式的 React/Redux 应用程序，当用户导航到 /user/signin 时应该打开该模式。在页面组件加载之前，调度一个操作来将isModalOpen 设置为true。
模态组件使用connect 将模态状态映射到道具。但是，当页面加载时，模态组件似乎在更新来自父页面组件的调度之前接收模态状态。 我尝试将isModalOpen 作为页面组件的道具向下传递，当我导航到路线时，它会正确显示模式。除非我通过模态组件调度一个动作以将 isModalOpen 设置为 false 并关闭模态，否则父组件上的道具不会更新，因此模态保持关闭状态。

这是我正在使用的代码：

用户登录页面组件

class UserSignInPage extends React.Component {
  componentWillMount() {
    this.props.openModal()
  }

  componentWillUnMount() {
    this.props.closeModal()
  }

  render() {
    const { location, isModalOpen } = this.props
    return (
      <StackedMenuTemplate header={<Header />} menu={<Navigation />} footer={<Footer />}>
        <Overview />
        <SignInForm redirectTo={location.query.redirect} isModalOpen />
      </StackedMenuTemplate>
    )
  }
}

UserSignIn.propTypes = {
  isModalOpen: PropTypes.bool,
  location: PropTypes.object,
  openModal: PropTypes.func.isRequired,
  closeModal: PropTypes.func.isRequired,
}

const mapStateToProps = (state) => ({
  isModalOpen: isOpen(state, 'LOGIN'),
})

const mapDispatchToProps = (dispatch) => ({
  openModal: () => {
    dispatch(modalShow('LOGIN'))
  },
  closeModal: () => {
    dispatch(modalHide('LOGIN'))
  },
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserSignIn)

用户登录模式容器

const handleSubmit = (values, dispatch) => {

})

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isSignedIn,
  isModalOpen: isOpen(state, 'LOGIN'),
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  handleLogout: () => {
    dispatch(logout())
  },
  handleRedirect: () => {
    dispatch(push(ownProps.redirectTo || '/'))
  },
  handleModalClose: () => {
    dispatch(modalHide('LOGIN'))
  },
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({
    form: 'UserSignIn',
    onSubmit: handleSubmit,
  })(Form)
)

用户登录表单组件

class UserSignInForm extends Component {
  componentWillMount() {
    this.props.handleLogout()
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.isAuthenticated && nextProps.isAuthenticated) { // true after successful submit
      this.props.handleRedirect()
    }
  }

  shouldComponentUpdate(nextProps) {
    if (this.props.isModalOpen === nextProps.isModalOpen) {
      return false
    }
  }

  render() {
    const { handleSubmit, isModalOpen, handleModalClose } = this.props

    return (
      <Modal open={isModalOpen} onClose={handleModalClose} closeIcon='close'>
        <Modal.Header content='Sign In' />
        <Form onSubmit={handleSubmit}>
          <Modal.Content>
            <Form.Field>
              <label>Email</label>
              <Field name='email' component={Input} type='email' />
            </Form.Field>
            <Form.Field>
              <label>Password</label>
              <Field name='password' component={Input} type='password' />
            </Form.Field>
          </Modal.Content>
          <Modal.Actions>
            <Button type='submit'>
            Sign In
          </Button>
          </Modal.Actions>
          <div>
            <Link to='/user/forgot-password' >
              Forgot Password?
            </Link>
          </div>
        </Form>
      </Modal>
    )
  }
}

UserSignInForm.propTypes = {
  isModalOpen: PropTypes.bool,
  handleModalClose: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
  handleLogout: PropTypes.func.isRequired,
  handleRedirect: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired,
}

export default UserSignInForm

Answer 1

我最终解决了这个问题。我从选择器中错误地获取了状态。

哎呀！