Реагировать на открытие модального окна при изменении маршрута

Я создаю приложение 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