使用 react-redux 的 create-react-app 的 HMR答案

【问题标题】：HMR for create-react-app with react-redux使用 react-redux 的 create-react-app 的 HMR
【发布时间】：2017-07-02 00:38:20
【问题描述】：

没有为使用 create-react-app 初始化的应用启用 HMR。这里有一篇关于如何启用它的博客文章：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 入侵到这个项目中吗？

【问题讨论】：

现在更容易了。请check.

标签： reactjs webpack redux react-router-redux webpack-hmr

【解决方案1】：

Dan Abramov 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）？我似乎无法让它工作:(
export default configureStore 时遇到各种错误。虽然当我做 export default configureStore() 时没有错误（但对于 redux reducers 仍然没有 HMR）

【解决方案2】：

您需要导入 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 以便它接受 props

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

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

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

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

【讨论】：

嗯，尝试了这个和一些排列，但无法让它工作。

【解决方案3】：

我能够使用 Dan Abramov 在“migrating-from-create-react-app”https://github.com/gaearon/react-hot-loader#migrating-from-create-react-app 上的描述，我在 Raspberry Pi (raspbian) 上使用流行的 7 英寸 LCD 触摸屏进行了设置。

为了增加额外的改变，我使用了“netatalk”文件系统共享，让 Raspbian 文件系统在 OSX 上显示为卷，这样我就可以在应用程序运行时在 Macbook 上的 Atom 编辑器中编辑应用程序源代码覆盆子。当我在 Atom 中编辑源代码并保存文件时，应用程序会在 Raspberry 上重新编译，并且热模块更换会在 Raspberry LCD 上显示更改，但没有刷新效果。 Raspberry 不是顶级性能，因此需要几秒钟才能发生更改，但非常酷。

真正的向导可能会尝试更进一步，让源代码在 Macbook（具有更多 CPU 能力）上编译，并在哪里编译代码仍然在 Raspberry 上运行和 HMR 更新。但是，从 HMR 的角度来看，该方案如何？我不确定我将如何完成该分区。

【讨论】：

【解决方案4】：

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

【讨论】：