title: Access Redux store in getServerSideProps in NextJS
body: <p>I want to access my redux store in the getServerSideProps(); in my Next.js app. I want to have the user id which i'm storing in the Redux Store so i can preload user data. I'm now using next-redux-wrapper and on the client side it's working. But when i access my store in getServerSideProps() it returns the initial state. I checked several examples but i can't get it working.</p>
  <p>My configureStore.js</p>
  <pre><code>import { createStore, applyMiddleware, compose } from &quot;redux&quot;;
  import reducer from &quot;./../service&quot;;
  import thunk from 'redux-thunk'
  import { createWrapper, HYDRATE} from 'next-redux-wrapper';
  
  const SET_CLIENT_STATE = 'SET_CLIENT_STATE';
  
  const storeEnhancers = typeof window != 'undefined' &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
  
  const makeStore = ({ isServer }) =&gt; {
  
    if (isServer) {
  
      return createStore(reducer, storeEnhancers(applyMiddleware(thunk)) );
  
    } else {
  
        const { persistStore, persistReducer } = require('redux-persist');
        const storage = require('redux-persist/lib/storage').default;
  
        const persistConfig = {
            key: 'nextjs',
            whitelist: ['userReducer'],
            storage
        };
  
        const store = createStore(
          persistReducer(persistConfig, reducer),
          storeEnhancers(applyMiddleware(thunk))
        );
    
        store.__PERSISTOR = persistStore(store);
  
        return store;
    }
  };
  
  export const wrapper = createWrapper(makeStore);
  
  export const setClientState = (clientState) =&gt; ({
    type: SET_CLIENT_STATE,
    payload: clientState
  });
  </code></pre>
  <p>My _app.js:</p>
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import Head from 'next/head';
  import { ThemeProvider } from '@material-ui/core/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import theme from '../styles/theme';
  import { useStore } from &quot;react-redux&quot;;
  import { PersistGate } from 'redux-persist/integration/react';
  import {wrapper} from './../redux/configureStore';
  
  const MyApp = ({Component, pageProps}) =&gt; {
    const store = useStore((state) =&gt; state);
  
    React.useEffect(() =&gt; {
      const jssStyles = document.querySelector('#jss-server-side');
      if (jssStyles) {
        jssStyles.parentElement.removeChild(jssStyles);
      }
    }, []);
  
    return (
      &lt;React.Fragment&gt;
        &lt;Head&gt;
          &lt;title&gt;Deeltuinen&lt;/title&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;minimum-scale=1, initial-scale=1, width=device-width&quot; /&gt;
        &lt;/Head&gt;
          &lt;PersistGate persistor={store.__PERSISTOR} loading={null}&gt;
            &lt;ThemeProvider theme={theme}&gt;
              &lt;CssBaseline /&gt;
              &lt;Component {...pageProps} /&gt;
            &lt;/ThemeProvider&gt;
          &lt;/PersistGate&gt;
      &lt;/React.Fragment&gt;
    );
  }
  
  export default wrapper.withRedux(MyApp);
  
  MyApp.propTypes = {
    Component: PropTypes.elementType.isRequired,
    pageProps: PropTypes.object.isRequired
  };
  </code></pre>
  <p>And finally the page where i want to get the store state:</p>
  <pre><code>import React from 'react';
  import Layout from './../../components/Layout';
  import API from './../../service/api';
  import {connect} from &quot;react-redux&quot;;
  import {wrapper, setClientState} from './../../redux/configureStore';
  
  const AccountSettings = ({data}) =&gt; {
   
    return (
      &lt;Layout title=&quot;Deeltuinen&quot;&gt;
        // User form
      &lt;/Layout&gt;
    );
  }
  
  export const getServerSideProps = wrapper.getServerSideProps(
    ({store, req, res}) =&gt; {
      const state = store.getState();
      console.log(state);
  
      //const data = await API.getUser(state.userReducer.user.token);
    }
  );
  
  export default connect(state =&gt; state,{setClientState})(AccountSettings);
  </code></pre>