Question

我刚刚升级到了最新版本的React，Webpack，Redux，Babel等。

反应热加载有效，但是react-redux出现错误：<Provider> does not support changing `store` on the fly.

我注意到重新加载后，它说模块App.js需要更新，然后再次调用createApp，这再次创建了商店。我不太确定如何避免这种情况。

我有十几个React应用程序，所以如果我能以某种方式保留createApp样板方法，那就太好了。

webpack.config.js：

{
  devServer: {
    hot: true,
    host: '0.0.0.0',
  },

  entry: {
    Bundle: __dirname + '/../src/App.js',
  },

  mode: 'development',

  module: {
    ...
  },

  output: {
    filename: '[name].js',
    path: RootDir,
    publicPath: 'http://localhost/',
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],

  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
};

App.js：

import 'react-hot-loader';

import Reducers from './Reducers';
import Routes from './Routes';

import createApp from './createApp';
import { hot } from 'react-hot-loader/root';

const app = createApp(Routes, Reducers);
export default hot(app);

createApp.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { applyRouterMiddleware, browserHistory, Router } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import { ReduxAsyncConnect } from 'redux-connect';

import configureStore from './configureStore';
import scrollMiddleware from './scrollMiddleware';

export default function createApp(routes, reducers) {
  const store = configureStore(reducers);
  const history = syncHistoryWithStore(browserHistory, store);

  const app = () => routes;

  render((
    <Provider store={store}>
      <Router
        history={history}
        render={(props) => (
          <ReduxAsyncConnect
            {...props}
            render={applyRouterMiddleware(scrollMiddleware)}
          />
        )}>
        {app()}
      </Router>
    </Provider>
  ), document.getElementById('app'));

  return app;
}

React Hot Loader：<provider>不支持动态更改“ store”

0 个答案: