[MST] Restore the Model Tree State using Hot Module Reloading when Model Definitions Change

Posted 2020-10-22 Answer1215

n this lesson, we will set up Hot Module Reloading(HMR), making it possible to load new definitions for React components and MST models and apply them to a running application.

In this lesson you will learn:

• How HMR roughly works
• How to accept changes to components
• How to accept changes to changing model definitions, while keeping state

let wishList = WishList.create(initialState)

function renderApp() {
    ReactDOM.render(<App wishList={wishList} />, document.getElementById("root"))
}

renderApp()

if (module.hot) {
    module.hot.accept(["./components/App"], () => {
        // new components
        renderApp()
    })

    module.hot.accept(["./models/WishList"], () => {
        // new model definitions
        const snapshot = getSnapshot(wishList)
        wishList = WishList.create(snapshot)
        renderApp()
    })
}