CODEWITHSUNDEEP
reactjsreduxreact-redux
Andy
Andy

Reputation: 1630

Why creating a new Component class for redux connect?

In reference this coding pattern:

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 a component(Thing), 2) creates another component (ThingContainer which is technically not a container) class to render that first component, and lastly using connect to finally export the container.

What's the difference with skipping step 2 above, and simply using the imported component(Thing) directly to export the container?

Upvotes: 3

Views: 287

Answers (1)

markerikson
markerikson

Reputation: 67539

Yeah, that file looks like it's somewhat unnecessary. The class ThingContainer component does nothing but forward props to <Thing>, which is exactly what the wrapper components generated by connect do already. So, that's useless - the file should just do export default connect(mapState)(Thing), and it would work exactly the same without the extra ThingContainer definition.

Upvotes: 3

Related Questions