javascript - 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 .0.0 for the migration instructions.

I have a ponent 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 { bineReducers } from 'redux';

export default bineReducers({
  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?

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./reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

I have a ponent 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 { bineReducers } from 'redux';

export default bineReducers({
  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?

Share Improve this question edited Jan 10, 2017 at 11:18 totymedli 31.1k22 gold badges138 silver badges169 bronze badges asked Oct 12, 2016 at 22:06 bigpotato 27.5k60 gold badges194 silver badges360 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 16

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.

I got the same error and the workaround is to remove the DevTools.

<Provider store={store} >
   <App />
</Provider>

In the ponent App's render() method, there is a:

<DevTools />

After I removed the DevTools, the error disappeared.

This is not a good solution, just for your reference.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React + Redux: "<Provider> does not support changing `store` on the fly" - Stack Ov

2 Answers 2

与本文相关的文章

评论列表(0)