What are Container/Smart components?

Technology CommunityCategory: React NativeWhat are Container/Smart components?
VietMX Staff asked 3 years ago
  • 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);