3

没有为使用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混合：

应用程序.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;

路由.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 入侵到这个项目中吗？

4

4 回答 4

3

Dan Abramov发布了一个适合我情况的解决方案：

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
于 2017-07-20T20:01:36.170 回答
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>;

然后在 index.js 中初始化 store 和 routes，并将相同的storeandroutes常量作为 props 传入<App />and<NextApp />

我认为 react-reouter-redux repo 上的这个问题可能会对您有所帮助：

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

于 2017-02-13T22:13:45.587 回答
0

I was able to use the description by Dan Abramov on "migrating-from-create-react-app" https://github.com/gaearon/react-hot-loader#migrating-from-create-react-app where I set this up on a Raspberry Pi (raspbian) with that popular 7 inch LCD touch screen.

To add an extra twist I used the 'netatalk' file system sharing to have the Raspbian file system show up as a Volume on OSX so I could edit the app source in the Atom editor on the Macbook while the app is running on Raspberry. When I edit source in Atom and save the file, the app then becomes recompiled on Raspberry and the Hot Module Replacement displays the change on the Raspberry LCD without refresh effects. Raspberry isn´t top performance so it takes a few seconds for the change to occur, but way cool.

The real wizards could try to take this further to have the source become compiled on the Macbook (which has more CPU power) and where compiled code still runs and HMR updates on the Raspberry. But how would that scheme look in a HMR sense ? I am not sure how I would go about accomplishing that partitioning.

于 2017-11-02T13:22:51.590 回答
0

我创建了一个示例 repo，它支持带有 Redux 的 HMR。使用create-react-app使用 HMR 进行 React 和 Redux

于 2018-04-17T03:33:43.763 回答