경로 변경시 반응 개방 모달

Question

사용자가 /user/signin으로 이동할 때 열어야하는 로그인 모드가있는 React/Redux 응용 프로그램을 구축하고 있습니다. 페이지 구성 요소가로드되기 전에 액션을 디스패치하여 isModalOpen을 true로 설정합니다.
모달 구성 요소는 connect을 사용하여 모달 상태를 소품에 매핑합니다. 그러나 페이지가로드 될 때 상위 페이지 구성 요소로부터의 디스패치가 업데이트되기 전에 모달 구성 요소가 모달 상태를 수신하는 것으로 보입니다. isModalOpen을 페이지 구성 요소의 소품으로 사용하려고 시도했습니다. 경로로 이동할 때 모달이 올바르게 표시됩니다.을 false로 설정하고 모달을 닫으려는 모달 구성 요소를 통해 작업을 디스패치 할 때를 제외하고 모체가 닫히지 않도록 상위 구성 요소의 소품이 업데이트되지 않습니다.

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 

양식 구성 요소에서

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) 
) 

사용자 로그인 페이지 구성 요소에서

사용자 로그인 : 여기

은 내가 사용 코드입니다

Answer 1

문제가 해결되었습니다. 내 셀렉터에서 상태가 잘못되었습니다.

웁스!