Question

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

index.js:832 MobX Provider: Provided store 'appStore' has changed. Please avoid replacing stores as the change might not propagate to all children

在加载热更新包之后部分刷新了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()

Answer 1

问题在于，每次热重新加载后，客户端的webpack都会重新引用引用App组件的索引文件，这会破坏uiStore和{{1}在索引文件中初始化的对象。将商店声明为appStore对象的成员已解决了该问题。这些商店现在可以在热模块更换中存活下来。

window

Answer 2

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

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

每次。

mobx可能会抱怨这是因为您要用新实例替换整个商店，而Mobx并没有这样做。

如果您将uiStore和appStore创建为state，可能会更好，而uiStore和appStore仍然会呈现新页面。

MobX和HMR：请避免更换商店，因为更改可能不会传播给所有儿童

2 个答案: