Do I need connect() from React Redux or should I use store.subscribe()?

[TomiS]

Greetings to all of you seasoned Redux veterans!

I'm new to React and Redux but I'd like to get this stuff right before moving on with our project. I've read about connecting presentational and container components but before going there, I'd like to make a simple component that does it all. I have a Header component that should render user's username if user is authenticated. I already managed to successfully login the user using our API and update my immutable Redux store accordingly. So, looking from the surface, the following code works.

The question is whether the following implementation is an antipattern or otherwise 'bad' e.g. performance-wise? Am I allowed to call setState() manually when using Redux? Without the setState() call the component doesn't seem to recognise state changes in store at all. Is there performance (or some other relevant) differences between this implementation strategy and the one that uses mapStateToProps() method with connect()?

// import stuff...
class Header extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      isAuthenticated: false,
      username: ''
    }
    let unsubscribe = context.store.subscribe(() => {
      let state = context.store.getState();
      //state is an Immutable.Map
      let user = state.get('login').get('user');
      let newState = {isAuthenticated: state.get('login').get('isAuthenticated')};
      if (newState.isAuthenticated) {
        newState.username = user.get('username');
      }
      this.setState(newState);
    });
  }

  render() {
    let loginStatus = null;
    if (this.state.isAuthenticated) {
      loginStatus = (
        <p>Logged in as ({this.state.username})</p>
      );
    }
    return (
      <div id="login-status">
        {loginStatus}
      </div>
    );
  }
}
Header.contextTypes = {
  store: React.PropTypes.object
}
export default Header

[gaearon]

This is a good example to understand how React Redux works, but I wouldn’t do this in a real app.

Without the setState() call the component doesn't seem to recognise state changes in store at all

Yes, this is precisely how React works: you must tell it that the state has updated.

The question is whether the following implementation is an antipattern or otherwise 'bad' e.g. performance-wise?

One issue you have there is that you never unsubscribe. You should be unsubscribing in componentWillUnmount.

Is there performance (or some other relevant) differences between this implementation strategy and the one that uses mapStateToProps() method with connect()?

Yes. You don't implement any optimizations. For example, components generated by connect() bail out of rendering if they see that the props returned from mapStateToProps() are shallowly equal to their previous versions.

Have a look at connect() source code. You will see that the idea is the same, but it has a ton of optimizations at different points. In general, it avoids calling your functions or rendering unless absolutely necessary.

I was a guest at this readthesource episode explaining how React Redux works so you might want to check it out.

We definitely recommend using React Redux for best performance instead of rolling your own subscription logic.

[TomiS]

Thanks @gaearon. This was extremely helpful. Have a nice weekend.