Javascript 在React-Redux中实现高阶组件

我正在使用react/redux构建一个应用程序，用于管理电子设备的收集（=捐赠）。我有几条路径，它们的功能类似于获取实体（可能是志愿者、捐赠者等）数据并将其显示在表中。 志愿者路线：

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { requestVolunteerData } from '../actions/entitiesAction';
import { volenteerColumns as columns } from '../utils/entitiesColumns/volenteerColumns';
import '../container/App.css';
import Table from '../components/Table/Table';
import Loading from '../components/Loading/Loading';

const mapStateToProps = state => {
    return {
        entities: state.requestEntitiesReducer.entities,
        isPending: state.requestEntitiesReducer.isPending,
        error: state.requestEntitiesReducer.error
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onRequestEntities: () => dispatch(requestVolunteerData())
    }
}

class Volenteer extends Component{
    
    componentDidMount () {
        this.props.onRequestEntities();
    }   
      
    render () {
        const { entities, isPending} = this.props;
        return isPending ?
            <Loading />
             :
            (
                <div className='tc'>
                    <h1 className='f2'>רשימת מתנדבים</h1>
                    <Table data={ entities } columns={ columns } /> 
                </div>
            );  
    }   
}

export default connect(mapStateToProps, mapDispatchToProps)(Volenteer);

但是我不明白如何注入加载和表组件，以及HOC中的类的名称应该是什么- 我是否应该使用另一个HOC（类似于WithLoader）来接收来自第一个HOC的数据，并使用适当的数据呈现加载和表组件？只需提及connect本身就是HOC，因此我需要将EntityComponent返回到redux存储：

return connect(mapStateToProps, mapDispatchToProps)(EntityComponent);

---

我将非常感谢任何帮助

好的，我做到了，HOC采用了一个基本组件，扩展了功能（通过为ex添加方法和管理状态），并用这个道具返回一个新的（取消的）comp。 让我们创建一个简单的志愿者竞赛：

import React, {Component} from 'react';
import { requestVolunteerData } from '../actions/entitiesAction';
import { volenteerColumns as columns } from '../utils/entitiesColumns/volenteerColumns';
import '../container/App.css';
import WithEntity from '../components/HOC/WithEntity.jsx';
import Table from '../components/Table/Table';
import Loading from '../components/Loading/Loading';


class Volenteer extends Component {
    render() {
        const { entities, isPending} = this.props;
        return isPending ?
            <Loading />
             :
            (
                <div className='tc'>
                    <h1 className='f2'>רשימת מתנדבים</h1>
                    <Table data={ entities } columns={ columns } /> 
                </div>
            );  
    }
}

const VolenteerHOC = WithEntity(Volenteer, requestVolunteerData() );
export default VolenteerHOC;

import React，{Component}来自'React'；
从“../actions/entitiesAction”导入{requestAutoligentData}；
从“../utils/entitiesColumns/oventeercolumns”导入{oventeercolumns as columns}”；
导入“../container/App.css”；
从“../components/HOC/WithEntity.jsx”导入WithEntity；
从“../components/Table/Table”导入表格；
从“../components/Loading/Loading”导入加载；
类扩展组件{
render（）{
const{entities，isPending}=this.props；
返回iSping？
:
(
רשימת מתנדבים
);  
}
}
const-ovoleteerhoc=WithEntity（ovoleteer，requestAutonovateData（））；
输出默认值为REERHOC；

现在，让我们创建管理状态的HOC WithEntity，并通过connect将新的cmop返回到redux状态：

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

const WithEntity = (EntityComponent, action) => {

  const mapStateToProps = state => {
    return {
      isPending: state.requestEntitiesReducer.isPending,
      entities: state.requestEntitiesReducer.entities,
      error: state.requestEntitiesReducer.error
    }
  }
  
  const mapDispatchToProps = dispatch => {
    return {
      onRequestEntities: () => dispatch(action)
    }
  }

  class NewCmoponent extends Component {
    componentDidMount () {
      this.props.onRequestEntities();
    }

    render() {
      const { entities, isPending} = this.props;
      return (
        <EntityComponent {...this.props} />
      ) 
    }
  }

  return connect(mapStateToProps, mapDispatchToProps)(NewCmoponent );
}

export default WithEntity;

import React，{Component}来自'React'；
从'react redux'导入{connect}；
const with entity=（EntityComponent，action）=>{
常量mapStateToProps=状态=>{
返回{
isPending:state.requestEntitiesReducer.isPending，
实体：state.requestEntitiesReducer.entities，
错误：state.requestEntitiesReducer.error
}
}
const mapDispatchToProps=调度=>{
返回{
onRequestEntities:（）=>分派（操作）
}
}
类newcmopont扩展组件{
组件安装（）{
this.props.onRequestEntities（）；
}
render（）{
const{entities，isPending}=this.props；
返回(
) 
}
}
返回连接（mapStateToProps、mapDispatchToProps）（NewCMopont）；
}
与实体导出默认值；

现在可以通过这个HOC简单地生成相同的路由

查看此视频：

return connect(mapStateToProps, mapDispatchToProps)(EntityComponent);

import React, {Component} from 'react';
import { requestVolunteerData } from '../actions/entitiesAction';
import { volenteerColumns as columns } from '../utils/entitiesColumns/volenteerColumns';
import '../container/App.css';
import WithEntity from '../components/HOC/WithEntity.jsx';
import Table from '../components/Table/Table';
import Loading from '../components/Loading/Loading';


class Volenteer extends Component {
    render() {
        const { entities, isPending} = this.props;
        return isPending ?
            <Loading />
             :
            (
                <div className='tc'>
                    <h1 className='f2'>רשימת מתנדבים</h1>
                    <Table data={ entities } columns={ columns } /> 
                </div>
            );  
    }
}

const VolenteerHOC = WithEntity(Volenteer, requestVolunteerData() );
export default VolenteerHOC;

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

const WithEntity = (EntityComponent, action) => {

  const mapStateToProps = state => {
    return {
      isPending: state.requestEntitiesReducer.isPending,
      entities: state.requestEntitiesReducer.entities,
      error: state.requestEntitiesReducer.error
    }
  }
  
  const mapDispatchToProps = dispatch => {
    return {
      onRequestEntities: () => dispatch(action)
    }
  }

  class NewCmoponent extends Component {
    componentDidMount () {
      this.props.onRequestEntities();
    }

    render() {
      const { entities, isPending} = this.props;
      return (
        <EntityComponent {...this.props} />
      ) 
    }
  }

  return connect(mapStateToProps, mapDispatchToProps)(NewCmoponent );
}

export default WithEntity;