Как передать состояние в React JS High Order Component

Question

Я использую OIDC-редуктор для состояния пользователя. У меня есть несколько компонентов, которые требуют аутентификации. Я хотел бы использовать что-то вроде export default connect(mapStateToProps, mapDispatchToProps)(withAuth(Component)); и запрашивать данные из состояния внутри моей службы аутентификации.

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

export const withAuth = (Component) => {
    return props => {


        return <Component {...props} />
    }
}

Возможно ли получить состояние в функции рендера? Таким образом, я могу проверить пользователя, вошедшего в систему, и перенаправить на страницу входа, если пользователь не вошел в систему?

Кстати: как бы я перенаправить? Я пытался использовать redirect-router-dom и <Redirect /> Но потом он жалуется на слишком частое изменение заданного состояния ... Но это может быть моей ошибкой. Я получаю эту ошибку при рендеринге: Error: Maximum update depth exceeded.

Answer 1

Если я правильно понимаю, вы хотите «украсить» свой компонент дополнительной логикой для обработки перенаправления аутентификации?

Я предлагаю использовать здесь шаблон «декоратор», например:

export const withAuth = (Component) => {
    const mapStateToProps = (state, ownProps) => ({
        authenticated: state.authenticated // Or what you need to do to determine this
    });

    return connect(mapStateToProps)(class extends React.Component {
        render() {
            const { authenticated, ...componentProps } = props; 
            if (authenticated) {            
               return <Component {...componentProps }>;
            }
            return <Redirect to="/login" />;
        }
    });
}

Тогда, когда вам это нужно, вы можете делать такие вещи, как:

export default withAuth(connect(yourOwnMapStateToProps)(YourComponent))

Answer 2

Просто разобрался, я изменил хранилище, поэтому вместо возврата функции он возвращает объект. Так что я могу загрузить все файлы JS. Это может быть не лучшим решением. Если есть лучший способ получить магазин в коде, я хотел бы услышать о том, как это сделать. Функция configurestore - это то, что я нашел во многих примерах.

import { store } from '../configureStore';

Используя store.getState() я могу получить текущее состояние.

Проблема с переадресацией, с которой я столкнулся, похожа на: Как использовать response-transition-group с response-router-dom