HMR用于创建反应的应用程式内反应，终极版

问题描述：

HMR不会为与create-react-app init'ed应用程序启用。有一个关于一个人如何可以在这里启用博客文章：http://chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app HMR用于创建反应的应用程式内反应，终极版

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到这个项目？

现在更容易了。请检查：https://stackoverflow.com/a/46830787/2668045 –

现在更容易。请检查： https://stackoverflow.com/a/46830787/2668045 –

答

您需要导入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常数道具为<App />和

我认为在反应-reouter - 终极版回购这个问题可以帮助你：

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

嗯，给了这个和一些排列尝试，并不能得到它的工作。 –

答

丹阿布拉莫夫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

你能分享一个拥有所有代码的小回购（比如store.js/index.js/app.js）吗？我似乎无法得到它的工作:( – NealVDV

当我'出口默认configureStore'时，我得到各种错误。虽然当我做'导出默认configureStore（）'没有错误（但仍然没有减压器的HMR） – NealVDV

答

我能够使用丹·阿布拉莫夫关于“迁移 - 从创建反应的应用内” https://github.com/gaearon/react-hot-loader#migrating-from-create-react-app其中I与流行7英寸的液晶触摸屏设置此上的覆盆子PI（raspbian）。

为了增加额外的扭曲力，我使用'netatalk'文件系统共享让Raspbian文件系统在OSX上显示为一个卷，这样我就可以在应用程序运行时在Macbook上的Atom编辑器中编辑应用程序源在树莓上。当我在原子编辑源和保存文件，该应用程序然后变为ON覆盆子和热模块的更换重新编译显示而不刷新效果树莓LCD上的变化。树莓isn't顶级的性能，因此需要几秒钟的变化发生，但非常酷。

真正的向导可以尝试借此进一步在源成为编译在MacBook（其中有更多的CPU功率）并在对树莓编译代码仍然运行和HMR更新。但是这个计划如何看起来具有HMR意义？我不知道如何去完成分区。

HMR用于创建反应的应用程式内反应，终极版

相关推荐