首页 文章

热模块重新加载后，React组件不会从Redux状态更新

提问于
浏览 次
1

我正在使用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);

为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);
}
javascript reactjs redux hot-module-replacement

1 回答

  • 2

    在React-Redux仓库中实际上有几个未解决的问题，讨论与React-Redux 5.0类似的行为 . 见react-redux#636和react-redux#670 .

    我做了一些研究，看起来层次结构中较高的组件正在重新编译和热重新加载，而不是层次结构中较低的组件 . 由于v5实现了自上而下的订阅系统，因此较低的组件不知道其订阅引用现在已过时 . 我还没有时间试图找到一个好方法来处理它 .

    基于我已经设置了你的代码来做到这一点 . 您将失去RHL尝试维护组件状态的潜在好处，但Redux连接应该正确重置 .

    回复于

相关问题