ルート変更時のモザール開始のリアクション

Question

ユーザーが/user/signinにナビゲートしたときに開くべきサインインモーダルのReact/Reduxアプリケーションをビルドします。ページコンポーネントがロードされる前に、アクションをディスパッチして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

私はこの問題を解決しました。私は自分のセレクタから州を間違って取得していました。

おっと！