我已经使有关视图的HMR / React Hot Reloader一切正常运作。但是在添加redux、react-redux等后,每次修改视图或reducer时,都会出现以下错误:
我的版本:
"redux": "^3.7.2" "react-redux": "^5.0.6"
我觉得这主要是由于我不理解在哪里以及如何放置我的module.hot.accept调用(是否可以有多个?)。相关代码如下。 boot.js(入口点)
我的configureStore中的module.hot.accept从未被调用,因为boot.js中的父级已经被调用了。只能有一个吗?!
我该如何消除这个错误?
或者,让我重新表述一下:我该如何消除这个错误并正确设置具有redux store的react热加载环境?
可能相关的Github问题:
<Provider>不支持实时更改“store”。您看到此错误的原因很可能是您更新到Redux 2.x和React Redux 2.x,它们不再自动热重载reducers。请参见https://github.com/reactjs/react-redux/releases/tag/v2.0.0以获取迁移说明。
按照错误中的链接会跳转到一个两年前的帖子,介绍了显式使用replaceReducer的方法,所以我就这样做了。我的版本:
"redux": "^3.7.2" "react-redux": "^5.0.6"
我觉得这主要是由于我不理解在哪里以及如何放置我的module.hot.accept调用(是否可以有多个?)。相关代码如下。 boot.js(入口点)
import { Provider } from 'react-redux';
import { AppContainer } from 'react-hot-loader';
import { ConnectedRouter } from 'react-router-redux';
import App from './App';
import { configureStore, history } from './store/configureStore';
let store = configureStore();
function renderApp() {
ReactDOM.render(
<AppContainer>
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>
</AppContainer>
, document.getElementById("app"));
}
renderApp();
if (module.hot) {
module.hot.accept(() => {
renderApp();
})
}
configureStore.js
import createHistory from 'history/createBrowserHistory';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import thunk from 'redux-thunk';
import DevTools from '../components/DevTools';
import * as rootReducer from '../services/rootReducer';
const composeEnhancers = compose;
export const history = createHistory();
const middleware = routerMiddleware(history);
export function configureStore(initialState) {
const reducers = { ...rootReducer, router: routerReducer };
const store = createStore(
combineReducers(reducers),
initialState,
composeEnhancers(
applyMiddleware(middleware, thunk),
DevTools.instrument()
)
);
if (module.hot) {
module.hot.accept('../services/rootReducer', () => {
const nextRootReducer = require('../services/rootReducer').default;
const finalReducer = {...nextRootReducer, router: routerReducer };
store.replaceReducer(finalReducer);
})
}
return store;
}
我的configureStore中的module.hot.accept从未被调用,因为boot.js中的父级已经被调用了。只能有一个吗?!
我该如何消除这个错误?
或者,让我重新表述一下:我该如何消除这个错误并正确设置具有redux store的react热加载环境?
可能相关的Github问题: