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

Question

У меня есть функция более высокого порядка, и внутри я пытаюсь получить доступ к свойству состояния "isAuthenticated", которое хранится в Redux.По какой-то причине он говорит, что состояние не определено.

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

export default function(ComposedComponent) {

    class Authenticate extends Component {

        render() {

            return (
                <ComposedComponent {...this.props} />
            )
        }
    }

    const mapStateToProps = (state) => {
        return {
            isAuthenticated: state.isAuthenticated
        }
    }


    return connect(mapStateToProps)(Authenticate)
}

ОБНОВЛЕНИЕ:

Я использую компонент высшего порядка следующим образом:

ReactDOM.render(
<Provider store = {store}>
  <BrowserRouter>
    <BaseLayout>
    <Switch>
      <Route path='/' exact component={App} />
      <Route path='/profile' component={requireAuth(Profile)} />
    </Switch>
    </BaseLayout>
  </BrowserRouter>
</Provider>
  , document.getElementById('root'));

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

ОБНОВЛЕНИЕ: код редуктора

const initialState = {
  isAuthenticated: false
}

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case 'AUTHENTICATED':
      return {
        ...state,
        isAuthenticated: action.value != null ? true : false 
      }
  }
}

export default reducer

Answer 1

Вам не хватает возврата по умолчанию в reducer => в исходном, когда вы не отправляете действие 'AUTHENTICATED', ваш магазин равен undefined.

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "AUTHENTICATED":
      return {
        ...state,
        isAuthenticated: action.value != null ? true : false
      };
    default:
      return initialState;
  }
};

Answer 2

Я не уверен, что вам удастся подключиться mapStateToProps, как в вашем примере. Вместо этого я бы импортировал ComposedComponent и использовал бы приставку для соединения Authenticate:

import React,{ Component } from 'react';
import { connect } from 'react-redux'
import ComposedComponent from './PATH_TO/ComposedComponent'

class Authenticate extends Component {

  render() {

    return (
      <ComposedComponent {...this.props} />
     )
  }
}

const mapStateToProps = (state) => {
  return {
    isAuthenticated: state.isAuthenticated
  }
}

export default connect(mapStateToProps)(Authenticate)

Теперь у вас не должно быть проблем с доступом к isAuthenticated из вашего магазина.