Edmund Edmund - 1 month ago 13
React JSX Question

React + Redux: <Provider> does not support changing `store` on the fly

I'm getting this error:

<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.


I have a component with this:

import React, { Component } from 'react';
import {
AppRegistry,
NativeAppEventEmitter
} from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './src/reducers';
import Onboarding from "./src/onboarding/Onboarding";
import Home from "./src/home/Home";
import codePush from 'react-native-code-push';

class Edmund extends Component {

...

startScreen() {
if (this.state.screen === "HOME" ) {
return (<Home />);
}

return (
<Onboarding />
);
}

render() {
return (
<Provider store={ createStore(reducers) }>
{ this.startScreen() }
</Provider>
)
}

AppRegistry.registerComponent('Edmund', () => Edmund)


my src/reducers/index.js file:

import { combineReducers } from 'redux';

export default combineReducers({
libraries: () => []
});


My packages:

{
"name": "Indigo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"lodash": "^4.13.1",
"react": "^15.2.0",
"react-native": "^0.27.1",
"react-native-apple-pay": "0.0.0",
"react-native-code-push": "^1.11.0-beta",
"react-native-loading-spinner-overlay": "^0.3.0",
"react-native-navigation": "^1.0.2",
"react-native-paged-scroll-view": "^2.0.1",
"react-native-progress": "^3.0.1",
"react-redux": "latest",
"redux": "^3.0.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"eslint": "latest",
"eslint-config-airbnb": "latest",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "latest",
"eslint-plugin-react": "latest"
}
}


I'm not even doing anything fancy so I don't get why there's this error. can anyone help?

Answer

If you dig into the react-redux code a bit you see this

if (store !== nextStore) {
  warnAboutReceivingStore()
}

So it would seem all you would have to do is move the createStore call outside.

store = createStore(reducers)


class Edmund extends Component {

  ...

  startScreen() {
    if (this.state.screen === "HOME" ) {
      return (<Home />);
    }

    return (
      <Onboarding />
    );
  }

  render() {
    return (
      <Provider store={ store }>
        { this.startScreen() }
      </Provider>
    )
  }

Haven't tested it but should work.