React Hot Loader: <Provider>не поддерживает изменение `store` на лету - PullRequest
1 голос
/ 16 апреля 2019

Я только что обновился до последней версии 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...