How to fetch initial data with react-redux connect

Viewed 4259

I'm reading the doc here https://github.com/reactjs/react-redux/blob/master/docs/api.md

I'd like to use Stateless component as much as possible, but I cannot figure out how I'd go about the initial data payload. With a Stateful React component, My container and component would look:

// Container
const mapDispatchToProps = (dispatch) {
    return {
        fetchData: () => dispatch(fetchDataAction());
    }
}

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

// Component
class MyComponent extends React.Component {
    componentDidMount() {
        this.props.fetchData();
    }
}

Where does the logic of componentDidMount go if I make my component stateless?

I've seen examples, where they suggest you extend your stateless component in your container with stateful React, and add that logic there:

// Container
class MyComponentContainer extends MyComponent {
    componentDidMount() {
        this.props.fetchData();
    }
}


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

But is that a best way to do it? If I am bothering to create a Stateful React, why not just do it directly on MyComponent?

EDIT Just to be clear; I'm asking if I can basically load my initial data WITHOUT ever creating a React.Component anywhere.

2 Answers
Related