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:
parent
de6bf4e75f
commit
a25359bf3f
50
examples/with-mobx/lib/with-mobx-store.js
Normal file
50
examples/with-mobx/lib/with-mobx-store.js
Normal 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} />
|
||||
}
|
||||
}
|
||||
}
|
19
examples/with-mobx/pages/_app.js
Normal file
19
examples/with-mobx/pages/_app.js
Normal 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)
|
|
@ -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' />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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='/' />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue