Question

我已经完成了与HMR / React Hot Reloader一起使用的所有内容，因为它与视图有关。但是在添加了redux，react-redux等之后......我随时修改了一个视图或者reducer，我得到了以下错误：

<table> <thead> <tr class="text-center location text-white"> <th>Employee</th> <th>Date</th> <th>Time In / Time Out</th> </tr> </thead> <tbody> <tr *ngFor= "let da of data; "> <td> <strong>{{da.name}}</strong> </td> <td colspan="2"> <tr *ngFor= "let d of da.details; "> <td>{{d.date | date}}</td> <td> <input type="time" [value]="d.start_time"/> <strong>/</strong> <input type="time" [value]="d.end_time"/> </td> </tr> </td> </tr> </tbody> </table>

在错误中的链接导致一篇关于明确使用replaceReducer的2年帖子，这就是我所做的。

我的版本：

“redux”：“^ 3.7.2” “react-redux”：“^ 5.0.6”

我有一种感觉，这主要是因为我不知道在哪里以及如何放置我的module.hot.accept调用（如果你可以有多个？）。相关代码如下。

boot.js（切入点）

<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.

configureStore.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中的module.hot.accept实际上从未被调用过，因为boot.js中的父模块是。可以只有1个吗？！

如何摆脱此错误？

或者，让我重新说一下：如何摆脱这个错误并正确设置一个带有redux存储的反应热负载环境？

可能相关的Github问题：

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

Answer 1

经过进一步研究，结果发现问题是由于boot.js中的accept调用范围。由于它基本上是从根级应用程序中观察一切，因此整个应用程序在减速器更改时重新加载，因此从未调用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));
    })
  }

使用Redux实现热重新加载

1 个答案: