Я только что обновился до последней версии 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;
}