dagda1 dagda1 - 1 year ago 129
React JSX Question

Correct place to load data in connected redux component

Where is the correct place to load data in a redux component?

Currently I have it this way.

Say I have this container component:

import { loadResultsPage } from '../actions/winratio-actions';

function mapStateToProps(state) {
const {
} = state;

return {

export default connect(mapStateToProps, {

I then make a call in the wrapped component's
lifecycle event:

export default class WinRatio extends Component {
componentWillMount() {

render() {
return (
<h1>Win Ratio</h1>

Where should this call happen?

Answer Source

You can do it in your container component. If you use redux you probably use smart\dumb components strategy. Create a container where you use compose function from redux package and you can compose it like this:

export default compose(
  connect(null, { loadData }), //this is your async action
  doOnComponentMount(({props}) => props.loadData()),

and doOnComponentMount is:

function doOnComponentMount(cb) {
  return (Component) => {
    return class extends React.Component {
      componentDidMount() {

      render() {
        return <Component {...this.props} />;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download