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

Question

我正在使用React-Hot-Loader 3.0.0-Beta.6用于热重新加载react组件。重新加载本身效果很好 - 我立即看到了更新的组件。不幸的是，在成功重新加载后，应用程序内的派遣操作不会再触发重新读者，我需要进行完整的手动刷新以使应用程序再次工作。调度操作更新了Redux Store，但没有启用组件。

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

mycomponent/container.js：

const mapStateToProps = state => ({
    ...
});
const mapDispatchToProps = dispatch =>
  bindActionCreators({
    ...
  }, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(Component);

mycomponent/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);
}

Answer 1

实际上在React-Redux回购中有几个开放问题，讨论了与React-Redux 5.0相似的行为。请参阅React-Redux＃636和React-Redux＃670。

我进行了一些研究，看起来层次结构中的组件较高，正在重新编译和热填充，但层次结构中的组件却不较低。由于V5实现了自上而下的订阅系统，因此下部组件不知道其订阅引用现在是陈旧的。我还没有时间尝试找出一个很好的方法。

根据我所看到的，我相信删除使用React-hot-loader的使用将围绕问题起作用。您可以使用" Plain" HMR重新加载整个组件树，我看到您已经设置了代码来完成此操作。您将失去RHL试图维护组件状态的潜在好处，但是Redux Connections 应该正确重置。