browserify、redux、react-routeでホットモジュールをリロードする

Question

webpackでブラウジングするのが好きですが、browserify環境で問題が解決できません。私はreact、redux、react-routeを使用しています。私は、反応ホットローダーが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

私の問題は、私は私のコンポーネントは、プロキシに包まれていなかったので、react-proxy@1.xもbabel-plugin-react-transformを使用していなかったということでした。あなたはそれを使用する場合livereactloadの 新バージョンでは、この時react-proxyまたはbabel-plugin-react-transform見ずにエラーが発生します：https://github.com/milankinen/livereactload/issues/64#issuecomment-231992217

react-routeと私の問題は、私はルートディレクティブの矢印関数として定義されたコンポーネントを使用していたということでした。明らかにlivereactloadはそれをサポートしていません。 arrow-functionではなくclassコンポーネントを使用して解決しました。ここに説明します：https://github.com/milankinen/livereactload/issues/43#issuecomment-231990841

Answer 2

私はそれをwatchifyプラグインとして使用しています：プラグイン（require（ 'livereactload'））、それは大丈夫です。

LiveReactload :: Bundleが変更され、ページが更新されますが、この警告も表示されます：browser.js：51警告：[react-router]変更することはできません。それは無視されます。

まだ「ローカル」リロードはありますが、多くのものがまだ再レンダリングされていて、私が望むほどには達成できないため、「真の」ホットリロードではありません。

私たちが店を設定するために追加するために必要な唯一のものは以下の通りです：reduxと

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