title: TypeError: Cannot read property 'getState' of undefined nexjs reudux and PersistGate
body: <p>Error TypeError: Cannot read property 'getState' of undefined I try Migrating from Create React App but cant use redux I tried many ways but still can't fix it. --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------&gt;</p>
  <p><a href="https://i.stack.imgur.com/gfOaE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gfOaE.png" alt="Error Image" /></a>
  _app.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import "../styles/globals.css";
  import App from "next/app";
  import { Provider } from "react-redux";
  import React from "react";
  import reduxStore from "../redux/store/store";
  import { reduxPersistor} from "../redux/store/store";
  import { PersistGate } from "redux-persist/integration/react";
  import { appWithTranslation } from "next-i18next";
  import theme from "../theme";
  import { ThemeProvider } from "@material-ui/core/styles";
  import Layout from "../components/layouts/Layout";
  import { Provider as AlertProvider } from "react-alert";
  import AlertTemplate from "../components/alert/alert.component.jsx";
  import dynamic from "next/dynamic";
  import withRedux from "next-redux-wrapper";
  const Pace = dynamic(
    () =&gt; {
      return import("../components/customs/pace/pace.js");
    },
    { ssr: false }
  );
  class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
      return {
        pageProps: {
          // Call page-level getInitialProps
          ...(Component.getInitialProps
            ? await Component.getInitialProps(ctx)
            : {}),
        },
      };
    }
    componentDidMount() {
      // let app = databaserealtime.ref("/maintenance/maintenancestatus");
      // app.on("value", (snapshot) =&gt; {
      //   this.setState({
      //     maintenancestatus: snapshot.val(),
      //   });
      // if (snapshot.val() === 1) {
      this.unsubscribeFromAuth = auth.onAuthStateChanged(async (userAuth) =&gt; {
        this.setState({ currentUser: userAuth });
        if (userAuth) {
          const userRef = await createUserProfileDocument(userAuth);
          userRef.onSnapshot((snapShot) =&gt; {
            this.props.setCurrentUser({
              id: snapShot.id,
              ...snapShot.data(),
            });
          });
        }
      });
      // }
      // });
      // this.props.i18n.changeLanguage(this.props.lang);
  
      // this.unsubscribeFromAnnounce = this.getAnnounceText();
    }
    componentWillUnmount() {
      this.unsubscribeFromAuth &amp;&amp; this.unsubscribeFromAuth();
      // this.unsubscribeFromAnnounce &amp;&amp; this.unsubscribeFromMaintenanceStatus();
      // this.unsubscribeFromAnnounce &amp;&amp; this.unsubscribeFromAnnounce();
      // this.unsubscribeFromAnnounce &amp;&amp; this.getAnnounceText();
    }
    render() {
      const { Component, pageProps, store } = this.props;
      const options = {
        timeout: 10000,
      };
      return (
        &lt;React.Fragment&gt;
          &lt;Provider store={store}&gt;
            &lt;PersistGate loading={null} persistor={reduxPersistor}&gt;
              &lt;ThemeProvider theme={theme}&gt;
                &lt;Pace color={theme.palette.primary.main} /&gt;
                &lt;AlertProvider template={AlertTemplate} {...options}&gt;
                  &lt;Layout&gt;
                    &lt;Component {...pageProps} /&gt;
                  &lt;/Layout&gt;
                &lt;/AlertProvider&gt;
              &lt;/ThemeProvider&gt;
            &lt;/PersistGate&gt;
          &lt;/Provider&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  // const mapStateToProps = ({ user, language }) =&gt; ({
  //   currentUser: user.currentUser,
  //   lang: language.lang,
  // });
  const mapStateToProps = (state) =&gt; console.log(state);
  const mapDispatchToProps = (dispatch) =&gt; ({
    setCurrentUser: (user) =&gt; dispatch(setCurrentUser(user)),
    setI18n: (lang) =&gt; dispatch(setI18n(lang)),
  });
  export default withRedux(
    mapStateToProps,
    mapDispatchToProps,
  )(appWithTranslation(MyApp));</code></pre>
  </div>
  </div>
  </p>
  <p>store.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createStore, applyMiddleware } from "redux";
  import { createLogger } from "redux-logger";
  import rootReducer from "../root-reducer";
  import { persistStore } from "redux-persist";
  import { composeWithDevTools } from 'redux-devtools-extension';
  const logger = createLogger();
  let middleware = [];
  if (process.env.NODE_ENV === "development") {
    middleware = [...middleware, logger];
  } else {
    middleware = [...middleware];
  }
  
  export const reduxStore = createStore(rootReducer, composeWithDevTools(applyMiddleware(...middleware)));
  export const reduxPersistor = persistStore(reduxStore,{});</code></pre>
  </div>
  </div>
  </p>
  <p>root-reducer.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { combineReducers } from "redux";
  import { persistReducer } from "redux-persist";
  import storage from "redux-persist/lib/storage";
  import userReducer from "./user/user.reducer";
  import i18nReducer from "./i18n/i18n.reducer";
  import currencyReducer from "./currency/currency.reducer";
  const persistConfig = {
    key: "root",
    storage,
    whitelist: ["language", "currency"],
  };
  const rootReducer = combineReducers({
    user: userReducer,
    language: i18nReducer,
    currency: currencyReducer,
  });
  export default persistReducer(persistConfig, rootReducer);</code></pre>
  </div>
  </div>
  </p>