Use RHL both in react and redux will cause <Provider> does not.. in console

[SidKwok]

Description

When I want to use hot-reload both in react and redux, it will cause <Provider> does not support changing store on the fly in console

Environment

React Hot Loader: 3.0.0-beta.6

React: 15.4.2

Redux: 3.6.0

react-redux: 5.0.2

Code

main.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { AppContainer } from 'react-hot-loader'

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  )
}

render(App)

if (module.hot) {
  module.hot.accept('./App', () => render(App))
}

configureStore.js:

import { createStore } from 'redux'
import rootReducer from '../reducers/index'

export default function configureStore (initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )

  if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index').default
      store.replaceReducer(nextRootReducer)
    })
  }

  return store
}

App.js:

...

const store = configureStore()

export default class App extends Component {
  render () {
    return (
      <div className='App'>
        <Provider store={store}>
          <Counter />
        </Provider>
      </div>
    )
  }
}

Behavior

when I'm trying to change anything in anywhere except reducers (hot-reload in reducers is fine), the console will report <Provider> does not support changing store on the fly

[SidKwok]

Fount the solution in this issue.