HMR: connected component gets disconnected from store

Description

Connected component gets disconnected from store when code changed and applied by HMR.

Steps:

• fetch demo repo: https://github.com/hoschi/bare-minimum-react-hot-rr4-redux/tree/disconnected-component
• start dev server and open site in browser: http://localhost:8080/page2
• use ‘Increment’ button to increment counter state to 6

Expected behavior

Remove <p>test</p> and ‘Increment’ component should receive changed state when clicked on one of the buttons.

Actual behavior

When I remove <p>test</p> HMR does its code updating which leads to the problem that ‘Increment’ component doesn’t get new store state. You can click on the buttons and the counter stays the same. I can see the actions dispatched in Redux devtools.

I found out that this is the case when the component above in the hierarchy is a container component which subscribed to state which is not subscribed in other components in the tree. You don’t get the problem when you change https://github.com/hoschi/bare-minimum-react-hot-rr4-redux/blob/08740ca8bac9a2d2d7e7527346f0ae36dde3234e/src/components/AppBarDesktopContainer.jsx to:

import { connect } from 'react-redux';
import AppBarDesktop from './AppBarDesktop';

export default connect((state) => ({
    newsData:state.counter
}))(AppBarDesktop);

and do the same steps described in the Description part.

Environment

react-redux 5.0.4, I tried also 5.0.2 and 5.0.3 without effect https://github.com/hoschi/bare-minimum-react-hot-rr4-redux/blob/08740ca8bac9a2d2d7e7527346f0ae36dde3234e/package.json

Run these commands in the project folder and fill in their results:

1. node -v: 6.3.1
2. npm -v: 3.10.3

Then, specify:

1. Operating system: Linux (Arch)
2. Browser and version: Chrome, 56.0.2924.87 (64-bit)

Reproducible Demo

https://github.com/hoschi/bare-minimum-react-hot-rr4-redux/tree/disconnected-component

Probably related issues

• https://github.com/gaearon/react-hot-loader/issues/492
• https://github.com/reactjs/react-redux/issues/636
• https://github.com/gaearon/react-hot-loader/issues/539

fun fact: You have to delete the tag below, deleting one above will trigger this bug and ‘fixes’ the one I’m reporting here.

[lukescott]

Perhaps I’m missing something, but your store doesn’t have module.hot.accept or store.replaceReducer:

import { createStore } from 'redux';

const reducer = (state = {
	counter:0,
	newsData:'my data'
}, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return Object.assign({}, state, {
				counter:state.counter +1
			})
        case 'DECREMENT':
            return Object.assign({}, state, {
				counter:state.counter -1
			})
    }

    return state;
}

export default createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

https://github.com/hoschi/bare-minimum-react-hot-rr4-redux/blob/08740ca8bac9a2d2d7e7527346f0ae36dde3234e/src/store.js

My store creator looks like this:

import {createStore} from "redux";
import rootReducer from "../reducers";
import {devToolsEnhancer} from "redux-devtools-extension/developmentOnly";

export default function configureStore(state) {
	const store = createStore(rootReducer, state, devToolsEnhancer());
	if (module.hot) {
		module.hot.accept("../reducers", () => {
			// I have "es2015": {"modules": false} on my .babelrc -
			// if you don't have this you need:
			// store.replaceReducer(require("../reducers").default);
			store.replaceReducer(rootReducer);
		});
	}
	return store;
}

That worked for me. As far as I know you need module.hot.accept for both React and Redux.

[nihiluis]

i think in this repo it’s working fine with 5.0.4 and react hot loader 1.3.1 https://github.com/rokoroku/react-redux-typescript-boilerplate/blob/master/package.json