使 Redux 减速器和其他非组件可热加载

IT技术 javascript reactjs webpack flux redux
2021-04-25 12:36:10

我很难让我的减速器热插拔。

我正在使用 Webpack 和react-transform-hmr. 有了这个,所有的 CSS 和组件在我保存时都是热加载的,但是当我尝试处理另一种类型的时候——最显着的是减速器——它会告诉我做一个完整的刷新。

我发现这是因为我需要明确地重新加载减速器并接受事件。我在我的以下代码中正在做的事情store.js

if(module.hot) {
  module.hot.accept('./reducers/', () => {
    const nextRootReducer = require('./reducers/index');
    store.replaceReducer(nextRootReducer);
  });
}

reducers/index 导出根减速器。

但是现在当我运行它时它仍然告诉我[HMR] Cannot check for update (Full reload needed并且还说错误[HMR] TypeError: currentReducer is not a function

所以 - 我需要一些帮助才能让它发挥作用。该代码可在https://github.com/wesbos/Simple-Redux 获得,您可以通过执行以下操作来重现它:

  1. npm install
  2. npm start
  3. 在浏览器中打开 localhost:3000
  4. 编辑减速器 - 打开posts.js并将第 6 行的数字更改为其他任何内容
1个回答

我没有仔细看,但我最好的猜测是这个问题
Babel 6 不再尝试让 ES6 默认导出module.exports.

所以代替

const nextRootReducer = require('./reducers/index');

你可能想要

const nextRootReducer = require('./reducers/index').default;

它与 ES6 默认导出的 Babel 6 输出相匹配。