766d7d5fe4
On the server `props.initialMobxState` received by the `constructor` is a fully functioning mobx store that was instantiated by `getInitialProps()` only a few ticks earlier. Thus, creating a new instance is unneccessary. In the browser, however, `props.initialMobxState` is a hydrated plain object and thus the store needs to be initialized.
41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import App, {Container} from 'next/app'
|
|
import React from 'react'
|
|
import { initializeStore } from '../store'
|
|
import { Provider } from 'mobx-react'
|
|
|
|
class MyMobxApp extends App {
|
|
static async getInitialProps(appContext) {
|
|
// Get or Create the store with `undefined` as initialState
|
|
// This allows you to set a custom default initialState
|
|
const mobxStore = initializeStore()
|
|
// Provide the store to getInitialProps of pages
|
|
appContext.ctx.mobxStore = mobxStore
|
|
|
|
let appProps = await App.getInitialProps(appContext)
|
|
|
|
return {
|
|
...appProps,
|
|
initialMobxState: mobxStore
|
|
};
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
const isServer = typeof window === 'undefined'
|
|
this.mobxStore = isServer ?
|
|
props.initialMobxState:
|
|
initializeStore(props.initialMobxState)
|
|
}
|
|
|
|
render() {
|
|
const { Component, pageProps } = this.props
|
|
return (
|
|
<Container>
|
|
<Provider store={this.mobxStore}>
|
|
<Component {...pageProps} />
|
|
</Provider>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
export default MyMobxApp
|