使用 browserify、redux 和 react-route 重新加载热模块答案

【问题标题】：Hot module reload with browserify, redux and react-route使用 browserify、redux 和 react-route 重新加载热模块
【发布时间】：2016-11-14 06:27:44
【问题描述】：

我更喜欢 browserify 而不是 webpack，但是 browserify 环境中存在我无法修复的问题。我正在使用 react、redux 和 react-route，我愿意像 react-hot-loader 为 webpack 环境提供的那样重新加载热模块。我正在使用 livereactload 来实现这一点（也尝试过 browserify-hmr），问题是它不适用于 redux。它的 redux 示例 (https://github.com/milankinen/livereactload/blob/master/examples/02-redux) 不适用于新克隆。有可能吗？有人可以给我应用到示例所需的更改以使其正常工作吗？

附：看这个问题https://github.com/milankinen/livereactload/issues/64

【问题讨论】：

标签： redux browserify hot-module-replacement

【解决方案1】：

我对@987654323@ 的问题是我没有使用react-proxy@1.x 或babel-plugin-react-transform，所以我的组件没有包装在代理中。如果您在没有 react-proxy 或 babel-plugin-react-transform 的情况下使用新版本的 livereactload 会引发错误，请查看：https://github.com/milankinen/livereactload/issues/64#issuecomment-231992217

react-route 的问题是我在 Route 指令中使用了一个定义为箭头函数的组件。显然livereactload 不支持。它通过使用类组件而不是箭头函数来解决。此处说明：https://github.com/milankinen/livereactload/issues/43#issuecomment-231990841

【讨论】：

【解决方案2】：

我正在使用它，但作为 watchify 插件：plugin(require('livereactload')) 并且它工作正常。

我确实更改了 LiveReactload :: Bundle 并更新了页面，但也更新了此警告：browser.js:51 警告：[react-router] You cannot change ;它将被忽略。

它仍然会“本地”重新加载，但它不是“真正的”热重新加载，因为很多东西仍在重新渲染并且没有达到我想要的效果。

我们需要添加配置存储的唯一内容如下：

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState);

  // React hot reload
  if (module.onReload) {
    module.onReload(() => {
      const nextReducer = require('../reducers');
      store.replaceReducer(nextReducer.default || nextReducer);
      // return true to indicate that this module is accepted and
      // there is no need to reload its parent modules
      return true;
    });
  }

  return store;
}

【讨论】：

感谢您的信息。我解决了我在回答中描述的问题。