Connected components not working with react-hot-loader

[edwjusti]

Components wrapped with connect are not updated after a hot reload, only components without the connect wrapper get their hot updates.

[developit]

Is this with React, or Preact?

[edwjusti]

React

[developit]

This is likely fixed by 1028258.

[developit]

Released as 3.2.0. Please re-open this issue if its still there in 3.2.0.

[edwjusti]

I'm sorry for taking so long to answer, but this issue is still there with the latest release. However I was able to mitigate the issue by rewriting the connect function using classes, the following code receives updates properly:

export function connect(mapToProps, actions) {
  if (typeof mapToProps !== 'function') {
    mapToProps = select(mapToProps || []);
  }
  
  return Child => class Wrapper extends PureComponent {
    state = mapToProps(store.getState());

    update = state => this.setState(mapToProps(state));

    boundActions = actions ? mapActions(actions, store) : { store };

    componentWillMount() {
      store.subscribe(this.update);
    }

    componentWillUnmount() {
      store.unsubscribe(this.update);
    }

    render() {
      return createElement(
        Child,
        Object.assign(this.boundActions, this.props, this.state)
      );
    }
  };
}