withReduxStore.js

import React from 'react'
import firebase from 'firebase/app'
import 'firebase/auth'
import { initializeStore } from './store'


const isServer = typeof window === 'undefined'
const __NEXT_REDUX_STORE__ = '__NEXT_REDUX_STORE__'

const initFirebase = (appName = '[DEFAULT]') => {
  if (firebase.apps.find(app => app.name === appName)) {
    return
  }

  firebase.initializeApp({
    apiKey: 'AIzaSyBf7AEFDeFD5Ow8W5dgBaQ0Ag_E0a41Kt0',
    authDomain: 'testdata-216005.firebaseapp.com',
    projectId: 'testdata-216005'
  }, appName)
}


function getOrCreateStore (initialState) {
  // Always make a new store if server, otherwise state is shared between requests
  if (isServer) {
    initFirebase();
    return initializeStore(initialState)
  }

  // Create store if unavailable on the client and set it on the window object
  if (!window[__NEXT_REDUX_STORE__]) {
    initFirebase();
    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
  }
  return window[__NEXT_REDUX_STORE__]
}

export default App => {
  return class AppWithRedux 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 reduxStore = getOrCreateStore()

      // Provide the store to getInitialProps of pages
      appContext.ctx.reduxStore = reduxStore

      let appProps = {}
      if (typeof App.getInitialProps === 'function') {
        appProps = await App.getInitialProps(appContext)
      }

      return {
        ...appProps,
        initialReduxState: reduxStore.getState()
      }
    }

    constructor (props) {
      super(props)
      this.reduxStore = getOrCreateStore(props.initialReduxState)
    }

    render () {
      return <App {...this.props} reduxStore={this.reduxStore} />
    }
  }
}