From 5592e64c366a1b10bf96953bf2712fcf0333fa83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=80=E4=B9=8B?= Date: Tue, 21 Apr 2020 02:05:10 +0800 Subject: [PATCH] Fix with mobx (#11907) * fix: with-mobx * refactor: up link * refactor: npm run prettier-fix * refactor: server side render * Updated store implementation and pages * Updated readme Co-authored-by: wangcheng Co-authored-by: Luis Alvarez --- examples/with-mobx/README.md | 22 ++-------- examples/with-mobx/components/Clock.js | 13 +++--- examples/with-mobx/components/Page.js | 2 +- examples/with-mobx/package.json | 8 ++-- examples/with-mobx/pages/_app.js | 16 +------ examples/with-mobx/pages/ssg.js | 11 +++++ examples/with-mobx/pages/ssr.js | 12 ++++++ examples/with-mobx/store.js | 59 ++++++++++++++++++++------ 8 files changed, 85 insertions(+), 58 deletions(-) create mode 100644 examples/with-mobx/pages/ssg.js create mode 100644 examples/with-mobx/pages/ssr.js diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md index 40deb51196..f1db2f1ca6 100644 --- a/examples/with-mobx/README.md +++ b/examples/with-mobx/README.md @@ -1,24 +1,14 @@ # MobX example -Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one. +Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. 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) +To illustrate SSG and SSR, go to `/ssg` and `/ssr`, those pages are using Next.js data fetching methods to get the date in the server and return it as props to the page, and then the browser will hydrate the store and continue updating the date. -The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. - -This example is a mobx port of the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example. Decorator support is activated by adding a `.babelrc` file at the root of the project: +The trick here for supporting universal mobx is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js`. -```json -{ - "presets": ["next/babel"], - "plugins": [ - ["@babel/plugin-proposal-decorators", { "legacy": true }], - ["@babel/plugin-proposal-class-properties", { "loose": true }] - ] -} -``` +The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. ## Deploy your own @@ -58,7 +48,3 @@ yarn dev ``` Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). - -### Rehydrating with server data - -Be aware that data that was used on the server (and provided via one of Next.js data fetching methods) will be stringified in order to rehydrate the client with it. That means, if you create a store that is, say, an `ObservableMap` and give it as prop to a page, then the server will render appropriately. But stringifying it for the client will turn the `ObservableMap` to an ordinary JavaScript object (which does not have `Map`-style methods and is not an observable). So it is better to create the store as a normal object and turn it into a `Observable` in the `render()` method. This way both sides have an `Observable` to work with. diff --git a/examples/with-mobx/components/Clock.js b/examples/with-mobx/components/Clock.js index c821ed3604..22a443e0f4 100644 --- a/examples/with-mobx/components/Clock.js +++ b/examples/with-mobx/components/Clock.js @@ -1,7 +1,8 @@ -export default props => { +import { observer } from 'mobx-react' +const Clock = observer(props => { return (
- {format(new Date(props.lastUpdate))} + {props.timeString}
) -} - -const format = t => - `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}` - -const pad = n => (n < 10 ? `0${n}` : n) +}) +export default Clock diff --git a/examples/with-mobx/components/Page.js b/examples/with-mobx/components/Page.js index 80b6bd210b..85f71ed2a3 100644 --- a/examples/with-mobx/components/Page.js +++ b/examples/with-mobx/components/Page.js @@ -19,7 +19,7 @@ class Page extends React.Component {

{this.props.title}