score:1

Accepted answer
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { fetchRuns } from "../actions";
import RunCell from "./RunCell";

class Runs extends React.Component {
  componentDidUpdate(prevProps) {
    if(prevProps.userId !== this.props.userId){ // <=== In order to prevent infinite loop add this comparison
       this.props.fetchRuns(this.props.userId);
    }
  }

  componentDidMount() {
    if(this.props.userId){ // <=== fetch your data inside this methode
      this.props.fetchRuns(this.props.userId);
   }
  }

  renderRuns() {
    //Show runs in reverse chronological order
    const sortedRuns = this.props.runs.sort(
      (a, b) => new Date(b.runDate) - new Date(a.runDate)
    );

    return sortedRuns.map((run) => {
      return <RunCell {...run} key={run.id} />;
    });
  }

  render() {
    if (this.props.runs) {
      return (
        <div className="ui container">
          <div className="ui secondary pointing menu">
            <h3>Your Training Log</h3>
            <div className="right menu">
              <Link className="ui button right" to="/runs/add">
                Add Run
              </Link>
            </div>
          </div>
          <div className="ui">{this.renderRuns()}</div>
        </div>
      );
    } else {
      return <div>Loading runs...</div>;
    }
  }
}

function mapStateToProps(state) {
  return { runs: Object.values(state.runs), userId: state.auth.userId };
}

function mapDispatchToProps(dispatch) {
  return {
    fetchRuns: (userId) => dispatch(fetchRuns(userId))
  }
}

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

Related Query

More Query from same tag