Как получить доступ к состоянию с компонентом высшего порядка

Question

Я хочу создать компонент более высокого порядка, который проверяет, вошел ли пользователь в систему. Если он есть, я показываю компонент, если нет, я хочу перенаправить его на страницу входа.

может кто-тообъясните, что я здесь делаю не так?

Вот что такое HOC:

import React from 'react';
import { connect } from 'react-redux';

const withAuthentication = (Component) => {
  class WithAuthentication extends React.Component {
    componentDidMount() {
      console.log(this.props.sessionId);
    }

    render() {
      return this.props.sessionId ? <Component {...this.props} /> : null;
    }
  }

  const mapStateToProps = (state) => ({
    sessionId: state.auth.userInfo.authUserInfo.sessionId
  })
  return connect(mapStateToProps, null)(WithAuthentication);
}

export default withAuthentication;

, тогда я называю это так:

....
import withAuthentication from './containers/withAuthentication';
const Hello = () => <h1> Hello</h1>;
....
<Route path="/" component={ withAuthentication(Hello) }/>

Я удалил больше кода, который ядумаю, не имеет отношения к этому ...

TIA для вас помощь!

Обновление: код, который вызывает проблемы кажется, это:

const mapStateToProps = (state) => ({
sessionId: state.auth.userInfo.authUserInfo.sessionId
})

Ошибка: TypeError: Cannot read property 'sessionId' of undefined

Answer 1

Итак, в основном, что вы делаете, вкладывая один компонент в другой, то есть функциональный компонент, возвращающий другой компонент после некоторой проверки логического уровня.То, что вы делаете, кажется хорошим.Вы должны иметь возможность доступа к реквизиту (не к состоянию) в таком функциональном компоненте, как этот

let aComponent(props)=>{
    return <p>{props.name}'s logged in status is {props.loggedIn}</p>
}

, если вы используете такой компонент

<aComponent title="Hello" loggedIn={this.props.isLoggedIn}/> //isLoggedIn from redux store

Также, если логический/ Проверка подлинности завершается неудачно в withAuthentication, вам необходимо вызвать API-интерфейс маршрутизатора, чтобы перейти на нужную страницу.то есть вы должны назвать это, если вы используете react-router

this.props.router.push('/login')