Javascript MobX和HMR：请避免替换存储，因为更改可能不会传播到所有子项

我尝试使用typescript和webpack 2在我的项目上启用HMR，但每当我进行更改时，我会在日志中看到以下输出，并且存储被重置为其原始值（丢弃状态）

加载热更新捆绑包后，UI会部分刷新，这是良好的和预期的，但由于存储丢失其状态，UI不是预期的

在HMR更新中保持mobx存储状态的正确模式是什么

当前，coode看起来如下所示：

const uiStore = new UiStore();
const appStore = new AppStore();

function render() {
  ReactDOM.render(
    <AppContainer>
    <Provider appStore={appStore} uiStore={uiStore}><App/></Provider>
  </AppContainer>, document.getElementById('root'))
}

const hot = (module as any).hot
if (hot) 
  hot.accept(() => {
    render()
  })
render()

const uiStore=new uiStore（）；
const appStore=新appStore（）；
函数render（）{
ReactDOM.render(
，document.getElementById（'root'））
}
常量hot=（模块如有）。hot
如果（热）
热接受（（）=>{
render（）
})
render（）

问题是，每次热重新加载后，客户端的Web包都会重新要求引用

App

组件的索引文件，这会破坏索引文件中初始化的

uiStore

和

appStore

对象。 将存储声明为

窗口

对象的成员解决了此问题。这些存储现在可以在热模块更换中使用

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import {observable} from 'mobx';
import {Provider} from 'mobx-react';

import {AppStore, UiStore, Stores} from './types/index';
import App from './components/App';
import './index.css';
declare var stores:Stores;

(window as any).stores = (window as any).stores || new Stores(new UiStore(), new AppStore());
function render() {
  ReactDOM.render(
    <AppContainer>
    <App {...stores} />
  </AppContainer>, document.getElementById('root'));
}

const hot = (module as any).hot
if (hot) 
  hot.accept(() => {
    render();
  })

render();

import*as React from'React'；
从“react dom”导入*作为react dom；
从“react hot loader”导入{AppContainer}；
从“mobx”导入{observable}；
从“mobx react”导入{Provider}；
从“./types/index”导入{AppStore，UiStore，Stores}；
从“./components/App”导入应用程序；
导入“./index.css”；
声明var存储：存储；
（任意窗口）.stores=（任意窗口）.stores | |新存储（新UiStore（），新AppStore（））；
函数render（）{
ReactDOM.render(
，document.getElementById（'root'）；
}
常量hot=（模块如有）。hot
如果（热）
热接受（（）=>{
render（）；
})
render（）；

每次从另一个页面重新加载新页面时，顶部组件可能会重新呈现，从而导致调用

const uiStore = new UiStore();
const appStore = new AppStore();

每一次

mobx可能会抱怨这一点，因为您正在用新实例替换整个商店，而mobx并不打算这样做

如果您将uiStore、appStore创建为一个

状态

，可能会更好，它仍然会呈现新页面

const uiStore = new UiStore();
const appStore = new AppStore();