React-redux: Hot reload not working

[a-koka]

Hi,

I apologize if this is an old request. I searched quite a bit but couldn't find a solution that works for my use case. I'm getting the following error when making changes via hot reloading.

<Provider> does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

The documentation seems to be for a simple configureStore implementation and is very old too. I was unable to find any documentation around module.hot.acceptCallback but my code would fail with the following error until I explicitly assigned it a function value.

hot.acceptCallback is not a function

Code below. Any help is greatly appreciated.

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(require('./redux/reducers/index'));
const store = createStoreWithMiddleware(reducer);

if (module.hot) {
  var acceptCallback = () => {
    const nextRootReducer = combineReducers(require('./redux/reducers/index'));
    store.replaceReducer(nextRootReducer);
  }

  // Enable Webpack hot module replacement for reducers
  module.hot.accept('./redux/reducers/index', acceptCallback);
  module.hot.acceptCallback = acceptCallback;
}

[timdorr]

You are probably not putting your Provider right near your entry point and ReactDOM.render. It shouldn't be contained within a component, as something like React Hot Loader will attempt to recreate the store on a reload.

[drewwells]

I'm seeing this issue. Is there a full example of an app to show how to avoid this behavior?

[a-koka]

I had to struggle a bit but @timdorr is right about the Provider. I'm sharing my setup below with the hopes that it'll help.

index.ios.js

import React, { Component } from 'react';

import {
  AppRegistry,
} from 'react-native';

import Main from './src/Main';

class App extends Component {
  render() {
    return (
      <Main />
    );
  }
}

AppRegistry.registerComponent('App', () => App);

Main.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';

import configureStore from './redux/configureStore';

import Navigation from './navigation/Navigation';

export const store = configureStore();

export default class Main extends Component {
  render() {
    return (
      <Provider store={store}>
        <Navigation />
      </Provider>
    );
  }
}

configureStore.js

import { createStore, combineReducers } from 'redux';

export default function configureStore() {
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers/index', () => {
      const nextRootReducer = combineReducers(require('./reducers/index'));
      store.replaceReducer(nextRootReducer);
    });
  }

  const reducer = combineReducers(require('./reducers/index'));
  const store = createStore(reducer);
  return store;
}