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

Question

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

P.S。看看这个问题https://github.com/milankinen/livereactload/issues/64

Answer 1

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

我确实更改了 LiveReactload::Bundle 并更新了页面，但还有此警告：browser.js:51 警告：[react-router] 你不能更改；它将被忽略。

它仍然会 "local" 重新加载，但它不是 "true" 热重新加载，因为很多东西仍在重新渲染并且没有达到我想要的效果。

我们唯一需要添加到配置商店的是以下内容：

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;
}

Answer 2

我对 redux 的问题是我没有使用 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 不支持这一点。它通过使用 class 组件而不是箭头函数来解决。此处解释：https://github.com/milankinen/livereactload/issues/43#issuecomment-231990841

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

Hot module reload with browserify, redux and react-route

redux

browserify

hot-module-replacement