提交 ef6df482 编写于 作者: E Evgeniy Kumachev 提交者: Luis Alvarez D

Add with-mobx-keystone-typescript example (#9844)

* add with-mobx-keystone-typescript example

* Use latest Next.js and removed gitignore

* Fixed my suggestions

* Enabled strict mode and simplified _app
Co-authored-by: NLuis Alvarez D. <luis@zeit.co>
上级 8e2ff2cd
{
"presets": ["next/babel"],
"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}
# mobx-keystone example
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-mobx-keystone-typescript)
## How to use
### Using `create-next-app`
Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
```bash
npx create-next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app
# or
yarn create next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app
```
### Download manually
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-mobx-keystone-typescript
cd with-mobx-keystone-typescript
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
```bash
now
```
## Notes
This example is a typescript and mobx-keysone port of the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example. MobX support has been implemented using React Hooks. Decorator support is activated by adding a `.babelrc` file at the root of the project:
```json
{
"presets": ["next/babel"],
"plugins": ["transform-decorators-legacy"]
}
```
## The idea behind the 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.
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.tsx` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the `mobx-keystone` store and returning the initial timestamp to be rendered. The root component for the render method is a React context 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.
## Implementation
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.ts`
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-keystone` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is passed down to `StoreProvider` via `snapshot` prop where it's used to rehydrate `RootStore` and provide context with `StoreContext`
```tsx
export const StoreContext = createContext<RootStore | null>(null)
export const StoreProvider: FC<{ snapshot?: SnapshotInOf<RootStore> }> = ({
children,
snapshot,
}) => {
const [ctxStore] = useState(() => initStore(snapshot))
return (
<StoreContext.Provider value={ctxStore}>{children}</StoreContext.Provider>
)
}
```
The store is accessible at any depth by using the StoreContext or `useStore` hook
```tsx
export function useStore() {
const store = useContext(StoreContext)
if (!store) {
// this is especially useful in TypeScript so you don't need to be checking for null all the time
throw new Error('useStore must be used within a StoreProvider.')
}
return store
}
```
The clock, under `components/Clock.tsx`, reacts to changes in the observable `store` by means of the `useObserver` hook.
```tsx
<div>
//...
{useObserver(() => (
<Clock lastUpdate={store.lastUpdate} light={store.light} />
))}
//...
</div>
```
import React, { FC } from 'react'
import { RootStore } from '../store'
const format = (t: Date) =>
`${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
const pad = (n: number) => (n < 10 ? `0${n}` : n)
interface Props extends Pick<RootStore, 'lastUpdate' | 'light'> {}
const Clock: FC<Props> = props => {
const divStyle = {
backgroundColor: props.light ? '#999' : '#000',
color: '#82FA58',
display: 'inline-block',
font: '50px menlo, monaco, monospace',
padding: '15px',
}
return (
<div style={divStyle}>{format(new Date(props.lastUpdate as number))}</div>
)
}
export { Clock }
import React, { useEffect, FC } from 'react'
import Link from 'next/link'
import { useObserver } from 'mobx-react-lite'
import { useStore } from '../store'
import { Clock } from './Clock'
interface Props {
linkTo: string
}
export const Sample: FC<Props> = props => {
const store = useStore()
useEffect(() => {
store.start()
return () => store.stop()
}, [store])
return (
<div>
<h1>Clock</h1>
{useObserver(() => (
<Clock lastUpdate={store.lastUpdate} light={store.light} />
))}
<nav>
<Link href={props.linkTo}>
<a>Navigate</a>
</Link>
</nav>
</div>
)
}
/// <reference types="next" />
/// <reference types="next/types/global" />
{
"name": "with-mobx-keystone-typescript",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"mobx": "^5.15.1",
"mobx-keystone": "^0.30.0",
"mobx-react-lite": "^1.5.2",
"next": "latest",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"typescript": "^3.7.4"
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.3.0",
"@types/node": "^13.1.1",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4"
},
"license": "ISC"
}
import { AppContext } from 'next/app'
import { getSnapshot } from 'mobx-keystone'
import { StoreProvider, initStore } from '../store'
export default function App({ Component, pageProps, initialState }: any) {
return (
<StoreProvider snapshot={initialState}>
<Component {...pageProps} />
</StoreProvider>
)
}
App.getInitialProps = async ({ Component, ctx }: AppContext) => {
//
// Use getInitialProps as a step in the lifecycle when
// we can initialize our store
//
const store = initStore()
//
// 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), pageProps }
}
import React from 'react'
import { NextPage } from 'next'
import { Sample } from '../components/Sample'
const IndexPage: NextPage = () => {
return <Sample linkTo="/other" />
}
export default IndexPage
import React from 'react'
import { NextPage } from 'next'
import { Sample } from '../components/Sample'
const OtherPage: NextPage = () => {
return <Sample linkTo="/" />
}
export default OtherPage
import { FC, createContext, useState, useContext } from 'react'
import { useStaticRendering } from 'mobx-react-lite'
import {
registerRootStore,
isRootStore,
SnapshotInOf,
fromSnapshot,
} from 'mobx-keystone'
import { RootStore } from './root'
// eslint-disable-next-line react-hooks/rules-of-hooks
useStaticRendering(typeof window === 'undefined')
let store: RootStore | null = null
export const initStore = (snapshot?: SnapshotInOf<RootStore>) => {
if (typeof window === 'undefined') {
store = new RootStore({})
}
if (!store) {
store = new RootStore({})
}
if (snapshot) {
store = fromSnapshot<RootStore>(snapshot)
}
if (!isRootStore(store)) registerRootStore(store)
return store
}
export const StoreContext = createContext<RootStore | null>(null)
export const StoreProvider: FC<{ snapshot?: SnapshotInOf<RootStore> }> = ({
children,
snapshot,
}) => {
const [ctxStore] = useState(() => initStore(snapshot))
return (
<StoreContext.Provider value={ctxStore}>{children}</StoreContext.Provider>
)
}
export function useStore() {
const store = useContext(StoreContext)
if (!store) {
// this is especially useful in TypeScript so you don't need to be checking for null all the time
throw new Error('useStore must be used within a StoreProvider.')
}
return store
}
export { RootStore }
import { Model, model, prop, modelAction, timestampAsDate } from 'mobx-keystone'
@model('store/root')
class RootStore extends Model({
foo: prop<number | null>(0),
lastUpdate: prop<number | null>(new Date().getTime()),
light: prop(false),
}) {
timer!: ReturnType<typeof setInterval>
@timestampAsDate('lastUpdate')
lastUpdateDate!: Date
@modelAction
start() {
this.timer = setInterval(() => {
this.update()
}, 1000)
}
@modelAction
update() {
this.lastUpdate = Date.now()
this.light = true
}
@modelAction
stop() {
clearInterval(this.timer)
}
}
export { RootStore }
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"keyofStringsOnly": true,
"isolatedModules": true,
"jsx": "preserve",
"experimentalDecorators": true
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册