reactjs - 使用 Redux 响应热重载

Question

我已经完成了与 View 相关的 HMR/React Hot Reloader 的所有工作。但是在添加 redux、react-redux 等之后......每当我修改 View 或 reducer 时，我都会收到以下错误:

<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

按照错误中的链接，会看到一篇关于显式使用 ReplaceReducer 的 2 年前的帖子，所以这就是我所做的。

我的版本:

“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中的父模块是。只能有1个吗？!

如何消除这个错误？

或者，让我重新表述一下:如何消除此错误并使用 redux 存储正确设置 react 热加载环境？

可能相关的 Github 问题:

https://github.com/reactjs/react-redux/issues/259

Answer 1

经过进一步研究，发现问题是由于 boot.js 中接受调用的范围造成的。由于它本质上是从根级应用程序监视所有内容，因此整个应用程序在reducer更改时重新加载，因此从未调用reducer的HMR接受。以下是工作版本。

boot.js

if (module.hot) {
    module.hot.accept('./containers/App.js', () => {
        const nextApp = require('./containers/App').default;
        renderApp(nextApp);
    })
}

configureStore.js

  if (module.hot) {
    module.hot.accept('../services/rootReducer', () => {
      const nextRootReducer = require('../services/rootReducer');
      const finalReducer = {...nextRootReducer, router: routerReducer };
      store.replaceReducer(combineReducers(finalReducer));
    })
  }