热模块重载后 React 组件未从 Redux 状态更新答案

【问题标题】：React components not updating from Redux state after Hot Module Reload热模块重载后 React 组件未从 Redux 状态更新
【发布时间】：2017-09-29 18:15:50
【问题描述】：

我正在使用 react-hot-loader 3.0.0-beta.6 热重载反应组件。重新加载本身效果很好 - 我立即看到更新的组件。不幸的是，在成功重新加载后，在应用程序内调度操作不再触发重新渲染，我需要进行完全手动刷新以使应用程序再次运行。调度的操作会更新 redux 存储，但不会重新渲染组件。

我使用的所有组件都由一个连接的容器和一个无状态组件组成。不呈现更新状态的原因可能是什么？如何继续调试？

MyComponent/container.js：

const mapStateToProps = state => ({
    ...
});

const mapDispatchToProps = dispatch =>
  bindActionCreators({
    ...
  }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Component);

我的组件/component.jsx：

const Component = ({ testProp1, testProp2 }) => (
  <div onClick={testProp2}>
    {testProp1}
  </div>
);

这里是成功的更新：

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./source/modules/DropDown/index.js
...
[HMR]  - ./source/modules/App/index.js

在 main.jsx 中渲染：

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <MuiThemeProvider>
          <App />
        </MuiThemeProvider>
      </Provider>
    </AppContainer>,
        eyeTalLayer
    );
};

render();

if (module.hot) {
  module.hot.accept('./modules/App', render);
}

【问题讨论】：

标签： javascript reactjs redux hot-module-replacement

【解决方案1】：

实际上，React-Redux 存储库中有几个未解决的问题讨论了与 React-Redux 5.0 类似的行为。请参阅react-redux#636 和react-redux#670。

我做了一些研究，看起来层次结构中较高的组件正在重新编译和热重新加载，但层次结构中的较低组件没有。因为 v5 实现了一个自上而下的订阅系统，较低的组件不知道他们的订阅引用现在已经过时了。我还没有时间想办法解决这个问题。

根据我所见，我相信删除 React-Hot-Loader 的使用将解决该问题。您可以使用“普通” HMR 重新加载整个组件树，我看到您已经设置了代码来执行此操作。您将失去 RHL 尝试维护组件状态的潜在好处，但 Redux 连接应该正确重置。

【讨论】：

当我切换回“react-redux”：“^4.4.8”时，问题就消失了。
是的，这就是我希望看到的。 React-Redux 4.x 不强制执行自上而下的订阅，因此行为不同。