title: useSelector does not work unless store is explicitly imported
body: <p>I'm having trouble with <code>useSelector</code> hook in a <strong>Gatsby.js</strong> app. The hook is not able to reach redux's <code>store</code> unless <code>store</code> is explicitly exported from redux setup file and imported into component file. It does seem like <code>&lt;Provider&gt;</code> is not available(?).</p>
  
  <blockquote>
    <p>Error: An error occurred while selecting the store state: Cannot read property 'user' of undefined</p>
  </blockquote>
  
  <p>I think I somewhat botched the redux setup or gatsby-browser // ssr setup, but I don't know how exactly… Any help would be appreciated.</p>
  
  <pre><code>// App.js
  
  import React from 'react'
  import { useSelector, useDispatch } from 'react-redux'
  
  import { store } from '../store/ReduxWrapper' // &lt;-- store needs to be imported to be accessible ?!
  
  import { loadFirebaseInitialize } from '../store/app'
  import AuthenticatedApp from '../containers/AuthenticatedApp'
  import UnauthenticatedApp from '../containers/UnauthenticatedApp'
  
  const App = () =&gt; {
   const dispatch = useDispatch()
   const firebase = useSelector(store =&gt; store.app.firebase) // &lt;-- store is undefined unless explicitely    imported
   const user = useSelector(store =&gt; store.auth.user) // &lt;-- store is undefined unless explicitely    imported
  
   if (!firebase) {
     dispatch(loadFirebaseInitialize())
     return (
       &lt;div&gt;
         &lt;p&gt;Loading firebase&lt;/p&gt;
       &lt;/div&gt;
     )
   } else {
     return user ? &lt;AuthenticatedApp /&gt; : &lt;UnauthenticatedApp /&gt;
   }
  }
  
  export default App
  </code></pre>
  
  <hr>
  
  <pre><code>// ReduxWrapper.js
  
  import React from 'react'
  import { Provider } from 'react-redux'
  import { applyMiddleware, createStore } from 'redux'
  import thunk from 'redux-thunk'
  import rootReducer from '.';
  
  export const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
  )
  
  export default ({ element }) =&gt; (
    &lt;Provider store={store}&gt;{element}&lt;/Provider&gt;
  );
  </code></pre>
  
  <hr>
  
  <pre><code>// gatsby-browser.js / gatsby-ssr.js
  
  export { default as wrapRootElement } from './src/store/ReduxWrapper'
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT</strong>: adding more code related to redux:</p>
  
  <pre><code>// index.js
  import { combineReducers } from 'redux';
  import app from './app';
  import auth from './auth';
  
  export default combineReducers({ app, auth });
  </code></pre>
  
  <hr>
  
  <pre><code>// auth.js
  
  // to get state from a sibling ('app.js') store
  import { store } from '../store/ReduxWrapper' 
  
  const initialState = {
    isAuthenticated: false,
    isAuthPending: false,
    error: null,
    user: null,
  }
  
  const AUTH_REQUEST_INITIALIZE = 'AUTH_REQUEST_INITIALIZE'
  const AUTH_REQUEST_SUCCESS = 'AUTH_REQUEST_SUCCESS'
  const AUTH_REQUEST_ERROR = 'AUTH_REQUEST_SUCCESS'
  const AUTH_LOGOUT = 'AUTH_LOGOUT'
  
  export const authRequestInitialize = () =&gt; ({
    type: AUTH_REQUEST_INITIALIZE,
  })
  
  export const authRequestSuccess = user =&gt; ({
    type: AUTH_REQUEST_SUCCESS,
    user,
  })
  
  export const authRequestError = error =&gt; ({
    type: AUTH_REQUEST_ERROR,
    error,
  })
  
  export const authLogin = ({ email, password }) =&gt; dispatch =&gt; {
    const { firebase } = store.getState().app
    if (firebase) {
      dispatch(authRequestInitialize())
      firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then(user =&gt; console.log(`user`, user) || dispatch(authRequestSuccess(user)))
        .catch(error =&gt; console.log(`authError`, error) || dispatch(authRequestError(error)))
    }
  }
  
  export const authLogout = () =&gt; dispatch =&gt; {
    const { firebase } = store.getState().app
    if (firebase) {
      firebase.auth().signOut().then(
        res =&gt; dispatch({ type: AUTH_LOGOUT })
      )  
    }
  }
  
  export default (state = initialState, action) =&gt; {
    switch (action.type) {
      case AUTH_REQUEST_INITIALIZE:
        return { ...state, isAuthPending: true }
      case AUTH_REQUEST_SUCCESS:
        return { ...state, user: action.user }
      case AUTH_REQUEST_ERROR:
        return { ...state, error: action.error }
      case AUTH_LOGOUT:
        return { ...state, user: null }
      default:
        return state
    }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>//app.js
  
  import getFirebase from '../firebase'
  
  const initialState = {
    firebase: null,
    isFirebaseLoading: false,
  }
  
  const LOAD_FIREBASE_INITIALIZE = 'LOAD_FIREBASE_INITIALIZE'
  const LOAD_FIREBASE_SUCCESS = 'LOAD_FIREBASE_SUCCESS'
  const LOAD_FIREBASE_ERROR = 'LOAD_FIREBASE_ERROR'
  
  export const loadFirebaseInitialize = () =&gt; {
    return dispatch =&gt; {
      const app = import('firebase/app')
      const auth = import('firebase/auth')
      const firestore = import('firebase/firestore')
  
      Promise.all([app, auth, firestore])
        .then(values =&gt; {
          const firebase = getFirebase(values[0])
          dispatch(loadFirebaseSuccess(firebase))
        })
        .catch(error =&gt; dispatch(loadFirebaseError(error)))
    }
  }
  
  export const loadFirebaseSuccess = firebaseObj =&gt; ({
    type: LOAD_FIREBASE_SUCCESS,
    firebaseObj,
  })
  
  export const loadFirebaseError = error =&gt; ({
    type: LOAD_FIREBASE_ERROR,
    error,
  })
  
  export default (state = initialState, action) =&gt; {
    switch (action.type) {
      case LOAD_FIREBASE_INITIALIZE:
        return { ...state, isFirebaseLoading: true }
      case LOAD_FIREBASE_SUCCESS:
        return {
          ...state,
          isFirebaseLoading: false,
          firebase: action.firebaseObj,
        }
      case LOAD_FIREBASE_ERROR:
        return { ...state, isFirebaseLoading: false, error: action.error }
      default:
        return state
    }
  }
  
  </code></pre>