CODEWITHSUNDEEP
javascriptreactjsreduxhot-module-replacement
zidik
zidik

Reputation: 136

React components not updating from Redux state after Hot Module Reload

I am using react-hot-loader 3.0.0-beta.6 to hot reload react components. Reloading itself works well - i see the updated component immediately. Unfortunately, after successful reload, dispatching actions inside the application does not trigger rerenders any more and I need to do a full manual refresh to get the application working again. The dispatched actions update the redux store, but the components are not rerendered.

All the components I am using consist of a connected container and a stateless component. What could be the reason for not rendering the updated state? How could I continue debugging?

MyComponent/container.js:

const mapStateToProps = state => ({
    ...
});

const mapDispatchToProps = dispatch =>
  bindActionCreators({
    ...
  }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Component);

MyComponent/component.jsx:

const Component = ({ testProp1, testProp2 }) => (
  <div onClick={testProp2}>
    {testProp1}
  </div>
);

Here is the successful update:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./source/modules/DropDown/index.js
...
[HMR]  - ./source/modules/App/index.js

Render in the main.jsx:

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <MuiThemeProvider>
          <App />
        </MuiThemeProvider>
      </Provider>
    </AppContainer>,
        eyeTalLayer
    );
};

render();

if (module.hot) {
  module.hot.accept('./modules/App', render);
}

Upvotes: 1

Views: 1288

Answers (1)

markerikson
markerikson

Reputation: 67547

There's actually a couple open issues in the React-Redux repo discussing similar behavior as of React-Redux 5.0. See react-redux#636 and react-redux#670.

I did a bit of research, and it looks like the components higher in the hierarchy are getting recompiled and hot-reloaded, but not the components lower in the hierarchy. Because v5 implemented a top-down subscription system, the lower components aren't aware that their subscription references are now stale. I haven't had time yet to try to figure out a good way to handle that.

Based on what I've seen, I believe that removing the use of React-Hot-Loader will work around the problem. You could just reload the entire component tree using "plain" HMR, and I see you've already got your code set up to do that. You'd lose the potential benefits of RHL trying to maintain component state, but the Redux connections should reset properly.

Upvotes: 2

Related Questions