diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md index 2a0721a5f0d4c..b21a4eb1c3935 100644 --- a/examples/with-mobx-state-tree/README.md +++ b/examples/with-mobx-state-tree/README.md @@ -54,7 +54,7 @@ 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 @@ -62,7 +62,7 @@ In this example we are going to display a digital clock that updates every secon ![](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 ` 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 ` 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. diff --git a/examples/with-mobx-state-tree/components/SampleComponent.js b/examples/with-mobx-state-tree/components/SampleComponent.js index 6478d9319aba8..e0e59ec1ffda2 100644 --- a/examples/with-mobx-state-tree/components/SampleComponent.js +++ b/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 (
-

{this.props.title}

- +

{title}

+ diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json index 62b1959a29800..ebb2b6d4ddda7 100644 --- a/examples/with-mobx-state-tree/package.json +++ b/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" diff --git a/examples/with-mobx-state-tree/pages/_app.js b/examples/with-mobx-state-tree/pages/_app.js index 8f0a292e99fcc..4041ede20e322 100644 --- a/examples/with-mobx-state-tree/pages/_app.js +++ b/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 ( - - - - ) - } +const MyApp = ({ Component, pageProps }) => { + return ( + + + + ) } + +export default MyApp diff --git a/examples/with-mobx-state-tree/pages/index.js b/examples/with-mobx-state-tree/pages/index.js index 8cde1fd6a0450..ad8cd12447255 100644 --- a/examples/with-mobx-state-tree/pages/index.js +++ b/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 } + +export default Index diff --git a/examples/with-mobx-state-tree/pages/other.js b/examples/with-mobx-state-tree/pages/other.js index de50e65151ced..8e349c30defd0 100644 --- a/examples/with-mobx-state-tree/pages/other.js +++ b/examples/with-mobx-state-tree/pages/other.js @@ -1,6 +1,8 @@ import React from 'react' import SampleComponent from '../components/SampleComponent' -export default () => { - return +const Other = () => { + return } + +export default Other diff --git a/examples/with-mobx-state-tree/stores/store.js b/examples/with-mobx-state-tree/stores/store.js index 681b7c25b1cfe..562f04c649163 100644 --- a/examples/with-mobx-state-tree/stores/store.js +++ b/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 }