next.js global store that persists between routes

StoreContainer.js

/**
 *  PROBLEM:
 *  In next.js, each route points to a distinct top-level component.
 *  Since there is no higher-level components in next.js, how to have
 *  a store that persists between route changes is not immediately
 *  obvious. One solution is this: a higher-order component that you
 *  wrap each of your top-level route components with.
 *
 *  This is borrowed from next.js' Redux example from here:
 *  https://github.com/zeit/next.js/wiki/Redux-example
 *
 *  Using `window` works, but it does initially feel icky. Maybe
 *  there is a better way, or next.js needs to support a level of
 *  components higher than the route components.
 *
 *  PS. This example uses my `mobx-app` package:
 *  https://github.com/danieldunderfelt/mobx-app
**/

import React, { Component, PropTypes } from 'react'
import { observer, Provider } from 'mobx-react'
import { createStore } from 'mobx-app'
import store from './store'

const stores = {
  Store: store
}

function initStore( initialState = {}, isServer ) {
  if( isServer && typeof window === 'undefined' ) {
    return createStore( stores, initialState )
  } else {
    if( !window.store ) {
      window.store = createStore( stores, initialState )
    }
    return window.store
  }
}

export default Component => {
  return observer(class extends Component {

    static getInitialProps({ req }) {
      const isServer = !!req
      const store = initStore( {}, isServer )
      return { initialState: store.state, isServer }
    }

    constructor(props) {
      super(props)

      const { initialState, isServer } = props
      this.store = initStore(initialState, isServer)
    }

    render() {
      const { props } = this
      const { state, actions } = this.store

      return (
        <Provider state={ state } actions={ actions }>
          <Component { ...props } />
        </Provider>
      )
    }
  })
}