Why create a new Component class for redux connection?
Regarding this coding scheme:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Thing from '../components/Thing';
class ThingContainer extends Component {
render() {
return <Thing {...this.props} />;
}
}
function mapStateToProps(state) {
...
}
export default connect(mapStateToProps)(ThingContainer);
So it 1) imports the component (Thing), 2) creates another component (ThingContainer, which is not technically a container) to render that first component, and finally uses the connection to finally export the container.
What's the difference with skipping step 2 above and just using the imported component (Thing) directly to export the container?
source to share
Yes, this file looks a little unnecessary. The component class ThingContainer
does nothing except direct props <Thing>
, which is what the already generated wrapper components do connect
. So, this is useless - the file should just do export default connect(mapState)(Thing)
and it will work exactly the same without further definition ThingContainer
.
source to share