HMR für create-react-app mit react-redux

Question

HMR ist nicht für Apps aktiviert, die mit create-react-app gestartet wurden. Es gibt einen Blog-Post über, wie man es hier aktivieren: 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 
    ); 
    }); 
} 

Ich versuche, etwas ähnliches zu tun, obwohl ich redux und react-router-redux zur Mischung hinzugefügt haben:

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

Allerdings bekomme ich nur diesen Fehler:

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

Gibt es eine Möglichkeit HMR in dieses Projekt zu hacken?

Answer 1

Sie müssen AppContainer importieren und Ihren NextApp-Container damit verpacken.

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

... 

... 

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

Möglicherweise müssen Sie Ihre app.js so modifizieren, dass es

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

in Requisiten nimmt Und dann intitialize den Laden und Routen in den index.js, und übergeben die gleichen store und routes Konstanten als Requisiten in <App /> und

ich denke, dieses Thema auf dem reagieren-reouter-redux Repo Ihnen helfen kann:

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

Answer 2

Dan Abramov posted a solution, die für meine Situation funktioniert:

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

konnte ich das verwenden Beschreibung von Dan Abramov über "Migration- from-create-react-app "https://github.com/gaearon/react-hot-loader#migrating-from-create-react-app wo ich dies auf einem Raspberry Pi (Raspbian) mit diesem beliebten 7-Zoll-LCD-Touchscreen eingerichtet.

Um einen zusätzlichen Twist hinzuzufügen, nutzte ich die 'Netatalk' Dateisystem-Freigabe, um das Raspbian-Dateisystem als Volume auf OSX erscheinen zu lassen, damit ich die App-Quelle im Atom-Editor auf dem Macbook bearbeiten konnte, während die App lief auf Himbeere. Wenn ich Quelle in Atom bearbeite und die Datei speichere, wird die App dann auf Raspberry neu kompiliert und das Hot Module Replacement zeigt die Änderung auf dem Raspberry LCD ohne Refresh-Effekte an. Raspberry ist keine Top-Leistung, daher dauert es ein paar Sekunden, bis die Änderung eintritt, aber sehr cool.

Die echten Assistenten könnten versuchen, dies weiter zu gehen, um die Quelle auf dem Macbook kompiliert werden (die mehr CPU-Leistung hat) und wo kompilierte Code noch läuft und HMR-Updates auf dem Himbeer. Aber wie würde dieses Schema in einem HMR-Sinn aussehen? Ich bin nicht sicher, wie ich diese Partitionierung durchführen würde.