检查与存储创建相关的代码 - createStore()
。
存储必须在app.js
之外构建,否则每次HMR更新都会被清除。
错误:
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { AppWidget } from 'containers';
import createStore from 'store/create-store';
const { store, persistor } = createStore();
const rootElement = window.document.getElementById('appWidget');
const render = (Component) => {
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Component />
</PersistGate>
</Provider>,
rootElement,
);
};
render(process.env.NODE_ENV === 'development' ? hot(module)(AppWidget) : AppWidget);
正确:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { AppWidget } from 'containers';
import store from 'store/create-store';
import { AppContainer } from 'react-hot-loader';
const rootElement = window.document.getElementById('appWidget');
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<Component />
</Provider>
</AppContainer>,
rootElement,
);
};
render(AppWidget);
if (module.hot) {
module.hot.accept();
}
import { applyMiddleware, compose, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import rootSaga from './sagas';
const doCreateStore = () => {
const sagaMiddleware = createSagaMiddleware();
const middleware = [
thunk,
sagaMiddleware,
];
const store = createStore(
rootReducer,
compose(
applyMiddleware(...middleware),
),
);
sagaMiddleware.run(rootSaga);
return store;
};
export default doCreateStore();