Improve with-mobx example (#4705)

in flavor of https://github.com/zeit/next.js/pull/4377

examples/with-mobx/lib/with-mobx-store.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import {initializeStore} from '../store'
+
+const isServer = typeof window === 'undefined'
+const __NEXT_MOBX_STORE__ = '__NEXT_MOBX_STORE__'
+
+function getOrCreateStore(initialState) {
+  // Always make a new store if server, otherwise state is shared between requests
+  if (isServer) {
+    return initializeStore(initialState)
+  }
+
+  // Create store if unavailable on the client and set it on the window object
+  if (!window[__NEXT_MOBX_STORE__]) {
+    window[__NEXT_MOBX_STORE__] = initializeStore(initialState)
+  }
+  return window[__NEXT_MOBX_STORE__]
+}
+
+export default (App) => {
+  return class AppWithMobx extends React.Component {
+    static async getInitialProps (appContext) {
+      // Get or Create the store with `undefined` as initialState
+      // This allows you to set a custom default initialState
+      const mobxStore = getOrCreateStore()
+
+      // Provide the store to getInitialProps of pages
+      appContext.ctx.mobxStore = mobxStore
+
+      let appProps = {}
+      if (typeof App.getInitialProps === 'function') {
+        appProps = await App.getInitialProps.call(App, appContext)
+      }
+
+      return {
+        ...appProps,
+        initialMobxState: mobxStore
+      }
+    }
+
+    constructor(props) {
+      super(props)
+      this.mobxStore = getOrCreateStore(props.initialMobxState)
+    }
+
+    render() {
+      return <App {...this.props} mobxStore={this.mobxStore} />
+    }
+  }
+}

examples/with-mobx/pages/_app.js

@@ -0,0 +1,19 @@
+import App, {Container} from 'next/app'
+import React from 'react'
+import withMobxStore from '../lib/with-mobx-store'
+import { Provider } from 'mobx-react'
+
+class MyApp extends App {
+  render () {
+    const {Component, pageProps, mobxStore} = this.props
+    return (
+      <Container>
+        <Provider store={mobxStore}>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    )
+  }
+}
+
+export default withMobxStore(MyApp)

examples/with-mobx/pages/index.js

@@ -1,25 +1,10 @@
 import React from 'react'
-import { Provider } from 'mobx-react'
-import { initStore } from '../store'
 import Page from '../components/Page'
 
 export default class Counter extends React.Component {
-  static getInitialProps ({ req }) {
-    const isServer = !!req
-    const store = initStore(isServer)
-    return { lastUpdate: store.lastUpdate, isServer }
-  }
-
-  constructor (props) {
-    super(props)
-    this.store = initStore(props.isServer, props.lastUpdate)
-  }
-
   render () {
     return (
-      <Provider store={this.store}>
       <Page title='Index Page' linkTo='/other' />
-      </Provider>
     )
   }
 }

examples/with-mobx/pages/other.js

@@ -1,25 +1,10 @@
 import React from 'react'
-import { Provider } from 'mobx-react'
-import { initStore } from '../store'
 import Page from '../components/Page'
 
 export default class Counter extends React.Component {
-  static getInitialProps ({ req }) {
-    const isServer = !!req
-    const store = initStore(isServer)
-    return { lastUpdate: store.lastUpdate, isServer }
-  }
-
-  constructor (props) {
-    super(props)
-    this.store = initStore(props.isServer, props.lastUpdate)
-  }
-
   render () {
     return (
-      <Provider store={this.store}>
       <Page title='Other Page' linkTo='/' />
-      </Provider>
     )
   }
 }

examples/with-mobx/store.js

@@ -20,7 +20,7 @@ class Store {
   stop = () => clearInterval(this.timer)
 }
 
-export function initStore (isServer, lastUpdate = Date.now()) {
+export function initializeStore (isServer, lastUpdate = Date.now()) {
   if (isServer) {
     return new Store(isServer, lastUpdate)
   } else {