React + Redux："<Provider>不支持动态更改` `store`‘“

Question

我得到了一个错误：

<Provider>不支持动态更改store。您很可能会看到此错误，因为您更新到Redux2.x并响应Redux2.x，不再自动重新加载热减速器。有关迁移说明，请参见https://github.com/reactjs/react-redux/releases/tag/v2.0.0。

我有一个组件：

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)

我的src/reducers/index.js文件：

import { combineReducers } from 'redux';

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

我的包裹：

{
  "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"
  }
}

我甚至没有做任何花哨的事情，所以我不明白为什么会有这个错误。有人能帮忙吗？

Answer 1

如果您深入了解代码，就会看到以下内容

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

因此，似乎您所要做的就是将createStore调用移到外边。

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>
    )
  }

还没有测试过，但应该能用。

Answer 2

我得到了同样的错误，解决方法是删除DevTools。

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

在component的呈现()方法中，有一个：

<DevTools />

删除DevTools后，错误消失了。

这不是一个好的解决办法，只是供你参考。