Updated with-mobx-state-tree

examples/with-mobx-state-tree/README.md

@@ -54,15 +54,15 @@ This example is a mobx port of the [with-redux](https://github.com/zeit/next.js/
 
 ### Rehydrating with server data
 
-After initializing the store (and possibly making changes such as fetching data), `getInitialProps` must stringify the store in order to pass it as props to the client. `mobx-state-tree` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is sent to the client as `props.initialState` where the pages's `constructor()` may use it to rehydrate the client store.
+After initializing the store (and possibly making changes such as fetching data), `getStaticProps` must stringify the store in order to pass it as props to the client. `mobx-state-tree` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is sent to the client as `props.initialState` where the pages's `constructor()` may use it to rehydrate the client store.
 
 ## Notes
 
 In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
 
 ![](http://i.imgur.com/JCxtWSj.gif)
 
-Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the mobx-state-tree store and returning the initial timestamp to be rendered. The root component for the render method is the `mobx-react <Provider>` that allows us to send the store down to children components so they can access to the state when required.
+Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getStaticProps`, initializing the mobx-state-tree store and returning the initial timestamp to be rendered. The root component for the render method is the `mobx-react <Provider>` that allows us to send the store down to children components so they can access to the state when required.
 
 To pass the initial timestamp from the server to the client we pass it as a prop called `lastUpdate` so then it's available when the client takes over.
 

examples/with-mobx-state-tree/components/SampleComponent.js

@@ -1,29 +1,27 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Link from 'next/link'
-import { inject, observer } from 'mobx-react'
+import { observer } from 'mobx-react'
 import Clock from './Clock'
+import { store } from '../stores/store'
 
-@inject('store')
 @observer
-class SampleComponent extends React.Component {
+class SampleComponent extends Component {
   componentDidMount() {
-    this.props.store.start()
+    store.start()
   }
 
   componentWillUnmount() {
-    this.props.store.stop()
+    store.stop()
   }
 
   render() {
+    const { title, linkTo } = this.props
     return (
       <div>
-        <h1>{this.props.title}</h1>
-        <Clock
-          lastUpdate={this.props.store.lastUpdate}
-          light={this.props.store.light}
-        />
+        <h1>{title}</h1>
+        <Clock lastUpdate={store.lastUpdate} light={store.light} />
         <nav>
-          <Link href={this.props.linkTo}>
+          <Link href={linkTo}>
             <a>Navigate</a>
           </Link>
         </nav>

examples/with-mobx-state-tree/package.json

@@ -11,8 +11,8 @@
     "mobx-react": "^4.0.4",
     "mobx-state-tree": "1.0.1",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.1.2"

examples/with-mobx-state-tree/pages/_app.js

@@ -1,43 +1,14 @@
 import React from 'react'
 import { Provider } from 'mobx-react'
 import { getSnapshot } from 'mobx-state-tree'
-import App from 'next/app'
-import { initializeStore } from '../stores/store'
+import { store } from '../stores/store'
 
-export default class MyApp extends App {
-  static async getInitialProps({ Component, ctx }) {
-    //
-    // Use getInitialProps as a step in the lifecycle when
-    // we can initialize our store
-    //
-    const isServer = typeof window === 'undefined'
-    const store = initializeStore(isServer)
-    //
-    // Check whether the page being rendered by the App has a
-    // static getInitialProps method and if so call it
-    //
-    let pageProps = {}
-    if (Component.getInitialProps) {
-      pageProps = await Component.getInitialProps(ctx)
-    }
-    return {
-      initialState: getSnapshot(store),
-      isServer,
-      pageProps,
-    }
-  }
-
-  constructor(props) {
-    super(props)
-    this.store = initializeStore(props.isServer, props.initialState)
-  }
-
-  render() {
-    const { Component, pageProps } = this.props
-    return (
-      <Provider store={this.store}>
-        <Component {...pageProps} />
-      </Provider>
-    )
-  }
+const MyApp = ({ Component, pageProps }) => {
+  return (
+    <Provider store={getSnapshot(store)}>
+      <Component {...pageProps} />
+    </Provider>
+  )
 }
+
+export default MyApp

examples/with-mobx-state-tree/pages/index.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import SampleComponent from '../components/SampleComponent'
 
-export default () => {
+const Index = () => {
   return <SampleComponent title="Index Page" linkTo="/other" />
 }
+
+export default Index

examples/with-mobx-state-tree/pages/other.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import SampleComponent from '../components/SampleComponent'
 
-export default () => {
-  return <SampleComponent title={'Other Page'} linkTo="/" />
+const Other = () => {
+  return <SampleComponent title="Other Page" linkTo="/" />
 }
+
+export default Other

examples/with-mobx-state-tree/stores/store.js

@@ -1,6 +1,4 @@
-import { types, applySnapshot } from 'mobx-state-tree'
-
-let store = null
+import { types } from 'mobx-state-tree'
 
 const Store = types
   .model({
@@ -29,15 +27,8 @@ const Store = types
     return { start, stop, update }
   })
 
-export function initializeStore(isServer, snapshot = null) {
-  if (isServer) {
-    store = Store.create({ lastUpdate: Date.now() })
-  }
-  if (store === null) {
-    store = Store.create({ lastUpdate: Date.now() })
-  }
-  if (snapshot) {
-    applySnapshot(store, snapshot)
-  }
-  return store
-}
+let store = Store.create({
+  lastUpdate: Date.now(),
+})
+
+export { store }