React + Redux HOC Loader

Question

У меня проблема с кодом повторения, которую я пытаюсь исправить с помощью HOC. В моем приложении React у меня есть много страниц, для которых требуется полностью загружать реквизиты из redux. Я исправлял это простым способом, либо помещая оператор switch для this.props.something, но и создавая загрузчик. Я попробовал создать HOC, но думаю, что моя логика не работает Если бы вы могли помочь мне, я был бы признателен.

Вот пример маршрута

import React, { Component } from 'react';
import { connect } from 'react-redux';
import LoaderHOC from '../../components/hoc/Loader';
import './Show.css';

class Show extends Component {

    render() {
        return (
            <div className="d-block w-100">
                <div className="console-show-header d-flex bg-info justify-content-center">
                    {this.props.company.name}
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return { company: state.setCompany };
}

export default LoaderHOC(this.props.company)(connect(mapStateToProps)(Show));

И МОЙ HOC

import React, {Component } from 'react';
import Spinner from '../UI/Spinner';

const LoaderHOC = (propName) => (WrappedComonent) => {
    return class LoaderHOC extends Component {
        isEmpty(prop) {
            return (
                prop === null ||
                prop === undefined ||
                (prop.hasOwnProperty('length') && prop.length === 0) ||
                (prop.constructor === Object && Object.keys(prop).length === 0)
            );
        }

        render() {
            return this.isEmpty(this.props[propName]) ? <Spinner /> : <WrappedComonent {...this.props} />;
        }   
    }
}

export default LoaderHOC;

Answer 1

Попробуйте это

const LoaderHOC = (propName) => (WrappedComonent) => {
    return class LoaderHOC extends Component {
        const prop = this.props[propName];
        isEmpty(prop) {
            return (
                prop === null ||
                prop === undefined ||
                (prop.hasOwnProperty('length') && prop.length === 0) ||
                (prop.constructor === Object && Object.keys(prop).length === 0)
            );
        }

        render() {
            return this.isEmpty(this.props[propName]) ? <Spinner /> : <WrappedComonent {...this.props} />;
        }   
    }
}

export default connect(mapStateToProps)(LoaderHOC('company')(Show));

Объяснение:

Чтобы редукс мог передать вам обновленный реквизит, вам необходимо подключить свой HOC. А поскольку вам нужно получить доступ к значению пропеллера во время выполнения, вам нужно получить к нему доступ через this.props[propName] внутри компонента.