Why creating a new Component class for redux connect?

Viewed 281

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?

1 Answers
Related