- React components which have access to the store.
- These components make API calls, do processing and contain the business logic of the app.
- The job of container components is to compute the values and pass them as props to the presentational components
Consider:
import React, {Component} from 'react';
import Header from '../component/Header.component';
class Home extends Component {
calculateSomething = () => {
...some calculation / api calls....
}
render () {
const {title, subtitle, goToLogin} = this.props;
return (
<Header title={title} subtitle={subtitle} goToLogin={goToLogin} calculateSomething={this.calculateSomething}/>
);
}
}
const mapStateToProps = (state)=>{
return {
title: state.title,
subtitle: state.subtitle
};
};
const mapDispatchToProps = (dispatch) => {
goToLogin: () => dispatch({action:'GO_TO_LOGIN'})
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);