<Provider> does not support changing `store` on the fly.

I’m trying to use redux with react-redux react-router-redux and redux-immutable and I get an error when the initial @@router/LOCATION_CHANGE action is triggered:

action @ 14:19:07.625 @@router/LOCATION_CHANGE 
%c prev state color: #9E9E9E; font-weight: bold Map { "repos": Map { "loading": false, "reposCount": 0 }, "users": Map { "loading": false, "usersCount": 0 }, "router": Map { "locationBeforeTransitions": null } }
%c action color: #03A9F4; font-weight: bold { type: '@@router/LOCATION_CHANGE',
  payload: 
   { pathname: 'blank',
     search: '',
     hash: '',
     state: null,
     action: 'POP',
     key: '5b05pd',
     query: {},
     '$searchBase': { search: '', searchBase: '' } } }
%c next state color: #4CAF50; font-weight: bold Map { "repos": Map { "loading": false, "reposCount": 0 }, "users": Map { "loading": false, "usersCount": 0 }, "router": Map { "locationBeforeTransitions": Map { "pathname": "blank", "search": "", "hash": "", "state": null, "action": "POP", "key": "5b05pd", "query": Map {}, "$searchBase": Map { "search": "", "searchBase": "" } } } }
—— log end ——
<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.
Warning: [react-router] You cannot change <Router history>; it will be ignored

My Root component looks as follows:

class Root extends React.Component<RootComponentProps, void> {
  public render() {
    const { store, history, routes } = this.props;
    return (
      <Provider store={store}>
        <div>
          <Router history={history}>
            {routes}
          </Router>
          <DevTools />
        </div>
      </Provider>
    );
  }
}

I have implemented a custom routerReducer to work with immutable, as explained in the react-router-redux docs:

const initialRouterReducerState = Immutable.fromJS({
    locationBeforeTransitions: null
});

let routerReducer = (state = initialRouterReducerState, action: any) => {
    if (action.type === LOCATION_CHANGE) {
        return state.merge({
            locationBeforeTransitions: action.payload
        });
    }
    return state;
};

This is my dev configureStore:

function configureStore(middlewares: Redux.Middleware[], rootReducer: Redux.Reducer, initialState: any): Redux.Store {
    const store = createStore(
        rootReducer,
        initialState,
        compose(
            applyMiddleware(...middlewares),
            DevTools.instrument()
        )
    );

    return store;
}

And my initial rendering:

  // ...
   const store = configureStore(middlewares, rootReducer, immutableInitialState);

    const history = syncHistoryWithStore(browserHistory, store, {
        selectLocationState: (state: any) => state.get("routing").toJS()
    });

    // Render Root coponent
    render(
        <Root store={store} history={history} routes={routes} />,
        document.getElementById(container)
    );

I’ve been trying all evening multiple things but I have not been able to figure out what is the problem 😞

[gaearon]

Have you had a chance to look at the source of <Provider>? It’s smaller than your example code 😉 . The line in question executes when <Provider> receives a different store instance as a prop.

This likely means

const store = configureStore(middlewares, rootReducer, immutableInitialState);

executes not once, as you probably intend, but multiple times, so two stores are created rather than one. You may set a debugger statement there and see why it happens. I hope this helps!

[pnkorn]

what about singleton?

const configureStore = (function () {
  let store
  return {
    create () {
      if (!store) {
        store = createStore()
      }
      return store
    }
  }
})()

const store = configureStore.create()