<Provider> does not support changing `store` on the fly in reactnative + redux

Question

error message -

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.

configureStore.js -

import { createStore,applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';

export default function configureStore(initialState) {
  const store = createStore(reducers,{},applyMiddleware(ReduxThunk));

  if (module.hot) {
    // console.log("in module.hot");
    console.log(reducers);
    module.hot.accept( () => {
      const nextRootReducer = require('./reducers/index').default;
      store.replaceReducer(nextRootReducer)
    });
  }
    return store;
}

App.js -

render(){
    const store = configureStore();
    return(
          <Provider store = {store}>
                <Container>
                      <Login/>
                </Container>
        </Provider>

refrence - video - https://www.youtube.com/watch?v=t2WXfAqLXJw
github - https://github.com/reactjs/react-redux/releases/tag/v2.0.0

solution given in video is implemented

Answer 1

You have implemented the requirement for changing the reducer when a module is hot loaded, but you are still attempting to create a new store for each render.

Instead, try moving your configureStore() call to outside your component.

const store = configureStore();

class App extends React.Component {

    render(){

        return(
              <Provider store = {store}>
                  <Container>
                      <Login/>
                  </Container>
              </Provider>