1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Improve with-mobx example (#4705)

in flavor of https://github.com/zeit/next.js/pull/4377
This commit is contained in:
Junyoung Choi (Sai) 2018-07-01 05:29:24 +09:00 committed by Tim Neutkens
parent de6bf4e75f
commit a25359bf3f
5 changed files with 72 additions and 33 deletions

View file

@ -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} />
}
}
}

View file

@ -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)

View file

@ -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>
<Page title='Index Page' linkTo='/other' />
)
}
}

View file

@ -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>
<Page title='Other Page' linkTo='/' />
)
}
}

View file

@ -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 {