HMR для создания-реакции-приложения с реакцией-редукцией

Question

HMR не включен для приложений, инициированных с помощью create-react-app. Существует сообщение в блоге о том, как можно включить его здесь: 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 
    ); 
    }); 
} 

Вы, возможно, потребуется изменить свои app.js так, что он принимает в реквизита

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

А потом intitialize магазин и маршрутов в index.js и проходят одни и те же store и routes константы в качестве реквизита Into <App /> и

Я думаю, что этот вопрос на реакцию-reouter-перевождь репо может помочь вам:

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

Я был в состоянии использовать описание Дэн Абрамов на тему «мигрирующие- от-create-react-app "https://github.com/gaearon/react-hot-loader#migrating-from-create-react-app, где я установил это на малиновый Pi (raspbian) с этим популярным 7-дюймовым сенсорным ЖК-экраном.

Чтобы добавить дополнительный твист, я использовал совместное использование файловой системы «netatalk», чтобы файловая система Raspbian отображалась как Volume на OSX, поэтому я мог редактировать источник приложения в редакторе Atom на Macbook во время работы приложения на малине. Когда я редактирую исходный код в Atom и сохраняю файл, приложение затем перекомпилируется на Малине, а замена Hot Module отображает изменение на ЖК-дисплее Малины без эффектов обновления. Малина не обладает максимальной производительностью, поэтому для ее изменения требуется несколько секунд, но это здорово.

Настоящие мастера могут попытаться сделать это дальше, чтобы источник скомпилировался на Macbook (у которого больше мощности процессора) и где скомпилированный код по-прежнему работает и обновления HMR на малине. Но как эта схема будет выглядеть в смысле HMR? Я не уверен, как я буду заниматься этим разделением.