2016-07-22 76 views
0

我試圖讓我的React應用程序中的熱重裝工作,但我不知道如何去調試這個錯誤。模塊無法熱更新

enter image description here

我的申請活動指數是這樣的:當我嘗試改變我的任何反應的組分發生

import React from 'react' 
import ReactDOM from 'react-dom' 
import Routes from 'routes/index' 
import { browserHistory } from 'react-router' 
import syncHistoryWithStore from 'modules/routing/sync' 

function createStore (browserHistory) { 
    let factory = require('./modules/store') 

    const store = factory.createStore(browserHistory) 

    if (module.hot) { 
    module.hot.accept('./modules/store',() => { 
     const nextFactory = require('./modules/store') 
     nextFactory.hydrateStore(store, factory.dehydrateStore(store)) 
     factory = nextFactory 
    }) 
    } 

    return store 
} 

const store = createStore(browserHistory) 
const history = syncHistoryWithStore(browserHistory, store, { 
    selectLocationState: state => state.routing, 
    adjustUrlOnReplay: true 
}) 

ReactDOM.render(
    <Routes history={history} store={store} />, 
    document.getElementById('root') 
) 

錯誤。這些更新通過routes/index路徑。但我不明白爲什麼react-redux-universal-hot-example,我已經從ides,工作和我的不是?

我可以看到,在熱例如只有「減速」路徑具有hot.accept所以我不太明白怎麼得到的反應組件工作重裝,但他們只是做...

任何建議或想法如何調試?

回答

0

它的工作原理,如果我有反應熱裝載機結合起來:

import { AppContainer } from 'react-hot-loader' 
import React from 'react' 
import ReactDOM from 'react-dom' 
import Routes from 'routes/index' 
import { browserHistory } from 'react-router' 
import syncHistoryWithStore from 'modules/routing/sync' 

function createStore (browserHistory) { 
    let factory = require('./modules/store') 

    const store = factory.createStore(browserHistory) 

    if (module.hot) { 
    module.hot.accept('./modules/store',() => { 
     const nextFactory = require('./modules/store') 
     nextFactory.hydrateStore(store, factory.dehydrateStore(store)) 
     factory = nextFactory 
    }) 
    } 

    return store 
} 

const store = createStore(browserHistory) 
const history = syncHistoryWithStore(browserHistory, store, { 
    selectLocationState: state => state.routing, 
    adjustUrlOnReplay: true 
}) 

ReactDOM.render(
    <AppContainer> 
    <Routes history={history} store={store} /> 
    </AppContainer>, 
    document.getElementById('root') 
) 

if (module.hot) { 
    module.hot.accept('./routes/index',() => { 
    // If you use Webpack 2 in ES modules mode, you can 
    // use <App /> here rather than require() a <NextApp />. 
    const NextRoutes = require('./routes/index').default 
    ReactDOM.render(
     <AppContainer> 
     <NextRoutes history={history} store={store} /> 
     </AppContainer>, 
     document.getElementById('root') 
    ) 
    }) 
} 

不過,我還是不明白是怎麼熱重裝例子可以工作嗎?