Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mobx HMR ES6 stores
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory, match } from 'react-router'
import createStore from '../shared/lib/create-store.js'
import ContextProvider from '../shared/lib/context-provider.js'
import { fetchDataOnLocationMatch } from '../shared/lib/fetch-data.js'
import Root from './Root.jsx'
import routes from '../shared/routes.jsx'
import { AppContainer } from 'react-hot-loader'
import { observable, computed, autorun } from 'mobx'
const store = createStore(window.INITIAL_STATE)
fetchDataOnLocationMatch(browserHistory, routes, match, store)
function renderApp(Root, hmrStore) {
if (window.store) {
hmrStore = require('../shared/lib/create-store.js').default(JSON.parse(JSON.stringify(window.store)))
window.store = hmrStore
}
render(
<AppContainer>
<Root store={hmrStore}/>
</AppContainer>,
document.getElementById('root')
)
}
renderApp(Root, store)
if (module.hot) {
if (!window.store) window.store = store
module.hot.accept(() => {
renderApp(require('./Root.jsx').default)
})
}
@njleonzhang

This comment has been minimized.

Copy link

@njleonzhang njleonzhang commented Aug 4, 2017

this can not work, when special object, for example: Date, is in the store.

JSON.stringify({a: new Date()})   ----> "{"a":"2017-08-04T08:08:54.564Z"}"
JSON.parse('{"a":"2017-08-04T08:08:54.564Z"}') ----> Object {a: "2017-08-04T08:08:54.564Z"}

the a is not a Date now, any operation to it will cause exception.

use serialize-javascript to fix?

@nschwan94

This comment has been minimized.

Copy link

@nschwan94 nschwan94 commented Oct 8, 2017

any clarifications or comments on this approach would be appreciated. having trouble implementing it in a mobx / electron app. this wont preserve state on a full refresh, right? only for hmr?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment