反応コンポーネントをホットリロードするために、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);
}