我正在使用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);
}
答案 0 :(得分:2)
React-Redux仓库实际上有几个未解决的问题,讨论与React-Redux 5.0相似的行为。请参阅react-redux#636和react-redux#670。
我做了一些研究,看起来层次结构中较高的组件正在重新编译和热重新加载,而不是层次结构中较低的组件。由于v5实现了自上而下的订阅系统,因此较低的组件不知道他们的订阅引用现在已过时。我还没有时间试图找到一个好方法来解决这个问题。
根据我所见,我相信删除React-Hot-Loader的使用将解决问题。您可以使用&#34; plain&#34;重新加载整个组件树。 HMR,我看到你已经设置了你的代码来做到这一点。您将失去RHL尝试维护组件状态的潜在好处,但Redux连接应正确重置。