Переход в состояние Redux для реагирования на компонент

Я использую, react-reduxчтобы иметь более плавный поток данных в моем приложении. В моем LoginPageкомпоненте я использую чистый компонент для простоты.

const LoginPage = ({ auth, doLogin, doLogout }) => (

    <div>
      <NavBar auth={auth}/>
        <div className="row">
            <div style={{display: 'flex', justifyContent: 'center'}} className="col-md-4 col-md-offset-4">
                <LoginForm auth={auth} doLogin={doLogin} doLogout={doLogout}/>
            </div>
        </div>
      </div>

);

// Connects state to the props of this component
const mapStateToProps = state => ({
  auth: state.auth,
});

// Return a NEW component that is connected to the Store
export default connect(mapStateToProps, { doLogin, doLogout })(LoginPage);

Это работает отлично, как я предполагал, но я попытался изменить формат, чтобы не использовать чистый компонент, потому что я хотел выполнить условный рендеринг (чтобы показать другой компонент при входе в систему).

Теперь это выглядит следующим образом:

const LoginComponent = ({ auth, doLogin, doLogout }) => (

    <div>
      <NavBar auth={auth}/>
        <div className="row">
            <div style={{display: 'flex', justifyContent: 'center'}} className="col-md-4 col-md-offset-4">
                <LoginForm auth={auth} doLogin={doLogin} doLogout={doLogout}/>
            </div>
        </div>
      </div>

);

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <LoginComponent/>
        )
    }
}

Я изменил LoginPageего LoginComponentи попытался отобразить LoginComponentв действительном компоненте React.

Однако это дает мне ошибку, говорящую об этом Cannot read property 'isLoggedIn' of undefined. isLoggedInявляется элементом auth.

В моем первом примере, я был в состоянии передать authделая const LoginPage = ({ auth, doLogin, doLogout }), но не знаете , как пройти в , authкогда я изменил ко второму примеру.

Как я могу это сделать?

javascript,reactjs,redux,

0

Ответов: 1


1 принят

Передайте реквизиты безстоящему, функциональному компоненту, как и с любым другим компонентом React. Прямо сейчас реквизит не передается LoginComponent, поэтому они всегда будут undefined.

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <LoginComponent
              auth={this.props.auth}
              doLogin={this.props.doLogin}
              doLogout={this.props.doLogout}
            />
        )
    }
}
JavaScript, reactjs, перевождь,
Похожие вопросы