如何在带有Redux的React.js中使用HOC重构此组件？

Question

我正在尝试在组件handleUS和handleJP中都实现HOC结构。

这里是组件

HandleUS

import styles from "../index.css";
import { connect } from "react-redux";
import { countryNews } from "../../actions/index";
import { Link } from "react-router-dom";
import history from "../../history";

class HandleUS extends React.Component {

  state = { countryCode: "us" };

  componentDidMount() {
    this.props.countryNews(this.state.countryCode);
  }

  HandleContent = () => {
    if (!this.props.news) {
      return (
        <div className="ui segment">
          <div className="ui active dimmer">
            <div className="ui active inverted dimmer">Loading...</div>
          </div>
        </div>
      );
    }

    if (!this.props.isSignedIn) {
      history.push("/");
    }

    return this.props.news.articles.map((nw, index) => (
      <div className="newsTitleList" key={nw.title}>
        <h2 className="ui header">
          <span className="newsListOrder">
            {`${index + 1}.`} <span> </span>
          </span>

          <Link
            to={{
              pathname: `/news/${nw.title}`,
              state: { countryCode: this.state.countryCode }
            }}
            className="header newsList"
          >
            {nw.title}
          </Link>
        </h2>
      </div>
    ));
  };

  render() {
    return (
      <div>
        <h1 className="sectionTitle">US Top 20 Headlines</h1>
        {this.HandleContent()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    news: state.news.newsList,
    isSignedIn: state.auth.isSignedIn
  };
};

export default connect(
  mapStateToProps,
  { countryNews }
)(HandleUS);

HandleJP

import React from "react";
import styles from "../index.css";
import { connect } from "react-redux";
import { countryNews } from "../../actions/index";
import { Link } from "react-router-dom";
import history from "../../history";

class HandleJP extends React.Component {

  state = { countryCode: "jp" };

  componentDidMount() {
    this.props.countryNews(this.state.countryCode);
  }

  HandleContent = () => {
    if (!this.props.news) {
      return (
        <div className="ui segment">
          <div className="ui active dimmer">
            <div className="ui active inverted dimmer">Loading...</div>
          </div>
        </div>
      );
    }
    if (!this.props.isSignedIn) {
      history.push("/");
    }
    return this.props.news.articles.map((nw, index) => (
      <div className="newsTitleList" key={nw.title}>
        <h2 className="ui header">
          <span className="newsListOrder">
            {`${index + 1}.`} <span> </span>
          </span>
          <Link
            to={{
              pathname: `/news/${nw.title}`,
              state: { countryCode: this.state.countryCode }
            }}
            className="header newsList"
          >
            {nw.title}
          </Link>
        </h2>
      </div>
    ));
  };

  render() {
    return (
      <div>
        <h1 className="sectionTitle">Japan Top 20 Headlines</h1>
        {this.HandleContent()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    isSignedIn: state.auth.isSignedIn,
    news: state.news.newsList
  };
};

export default connect(
  mapStateToProps,
  { countryNews }
)(HandleJP);

这两个组件都获得动作创建者this.props.countryNews并传递其中的每个组件this.state.countryCode来获取新闻api。

如您所见，两个组件的结构几乎相同。

但是如何使用Redux制作HOC组件？