Skip to content

Instantly share code, notes, and snippets.

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 ( {
hmrStore = require('../shared/lib/create-store.js').default(JSON.parse(JSON.stringify( = hmrStore
<Root store={hmrStore}/>
renderApp(Root, store)
if ( {
if (! = store => {
Copy link

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?

Copy link

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