MobXとHMR：変更がすべての子に反映されない可能性があるので、店舗を交換しないでください

Question

私は自分のプロジェクトでtypescriptとwebpack 2でHMRを有効にしようとしましたが、変更を加えるたびにログとストアUIが良いと予想されるが、ストアがその状態を失ったので、UIが期待ものではないホット更新バンドルをロードした後、部分的に更新され

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

その元の値にリセットされる（廃棄状態）。

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

問題は、すべてのホットリロード後、Appコンポーネントを参照して、私のインデックスファイルがクライアント側でのWebPACKによって再要求されたということでした、これはでしたインデックスファイルで初期化されたuiStoreおよびappStoreオブジェクトを破棄します。 windowオブジェクトのメンバとしてストアを宣言して、この問題を解決しました。店舗は現在、ホットモジュールの交換を通じて生き残りました。

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();