レスキューレックスを使用したcreate-react-appのHMR

Question

create-react-appで初期化されたアプリではHMRが有効になっていません。 1は、ここでそれを有効にする方法についてのブログ記事があります：http://chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app

ReactDOM.render(
    <App />, 
    rootEl 
); 

if (module.hot) { 
    module.hot.accept('./App',() => { 
    const NextApp = require('./App').default; 
    ReactDOM.render(
     <NextApp />, 
     rootEl 
    ); 
    }); 
} 

私はミックスにreduxとreact-router-reduxを追加したけれども、私は、似た何かをしようとしています：

App.js

を

import React from 'react' 
import { Provider } from 'react-redux' 
import store from './store/store' 
import routes from './routes' 

const App = (
    <Provider store={store}> 
    { routes } 
    </Provider> 
); 

export default App; 

routes.js

import React from 'react'; 
import { browserHistory, Router, Route } from 'react-router'; 
import { syncHistoryWithStore } from 'react-router-redux'; 
import store from '../store/store'; 
import { AnonymousLayout } from '../layouts'; 
import { LoginForm } from './Login'; 

const history = syncHistoryWithStore(browserHistory, store); 

export default (
    <Router history={history}> 
    <Route path="/" component={AnonymousLayout}> 
     <Route path="/login" component={LoginForm} /> 
    </Route> 
    </Router> 
); 

の

index.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './client/App'; 

const rootEl = document.getElementById('root'); 

ReactDOM.render(
    App, 
    rootEl 
); 

if (module.hot) { 
    module.hot.accept('./client/App',() => { 
    const NextApp = './client/App'; 
    ReactDOM.render(
     <NextApp />, 
     rootEl 
    ); 
    }); 
} 

しかし、私はこのエラーを取得する：

Warning: [react-router] You cannot change <Router routes>; it will be ignored

は、このプロジェクトにHMRをハックするためにいくつかの方法はありますか？

Answer 1

AppContainerをインポートしてNextAppコンテナをラップする必要があります。

import { AppContainer } from 'react-hot-loader'; 

... 

... 

if (module.hot) { 
    module.hot.accept('./client/App',() => { 
    const NextApp = './client/App'; 
    ReactDOM.render(
     <AppContainer /> 
     <NextApp /> 
     <AppContainer />, 
     rootEl 
    ); 
    }); 
} 

それはindex.jsに店舗やルートをintitialize、同じstoreとroutes定数を渡し、その後

小道具に

const App = (store, routes) => 
    <Provider store={store}> 
    { routes } 
    </Provider>; 

を取り、そのので、あなたのapp.jsを変更する必要があります <App />と

に小道具として私が反応し-reouter-Reduxのレポで、この問題はあなたを助けるかもしれないと思う：

私の状況のた​​めに働く3210

https://github.com/reactjs/react-router-redux/issues/179

Answer 2

ダン・アブラモフposted a solution：

index.js

// regular imports 
ReactDOM.render(<App /> , document.getElementById('root')) 

if (module.hot) { 
    module.hot.accept('./App',() => { 
    ReactDOM.render(<App />, document.getElementById('root')) 
    }) 
} 

store.js

import { createStore } from 'redux' 

import rootReducer from './reducers' 

const configureStore =() => { 
    const store = createStore(rootReducer) 

    if (process.env.NODE_ENV !== "production") { 
    if (module.hot) { 
     module.hot.accept('./reducers',() => { 
     store.replaceReducer(rootReducer) 
     }) 
    } 
    } 

    return store 
} 

export default configureStore 

Answer 3

私が使用することができましたDan Abramovによる「migrating- from-create-react-app "https://github.com/gaearon/react-hot-loader#migrating-from-create-react-appここでは、人気のある7インチLCDタッチスクリーンのラズベリーパイ（ラスベス）でこれを設定しています。

私は 'netatalk'ファイルシステム共有を使用してRaspbianファイルシステムをOSX上のボリュームとして表示するようにしたので、アプリケーションの実行中にMacBookのAtomエディタでアプリケーションソースを編集することができましたラズベリーに Atomでソースを編集してファイルを保存すると、アプリはRaspberryで再コンパイルされ、Hot Module Replacementはリフレッシュ効果なしでRaspberry LCDに変更を表示します。ラズベリーは最高のパフォーマンスではありませんので、変更が発生するまでに数秒かかりますが、クールです。

実際のウィザードでは、ソースコードをMacbook（より多くのCPUを搭載）でコンパイルし、コンパイル済みのコード がまだ実行され、ラズベリーでHMRのアップデートが行われるようにすることができます。しかし、その計画はHMRの意味でどのように見えるだろうか？私はそのパーティション化をどのように達成するかについてはわかりません。