How to access store when server-side rendering in NextJS?

Question

I'm trying to get redux store when server-side rendering. But I cannot find store in page component's getinitialProps.

//store/index.ts

import { applyMiddleware, createStore, compose } from 'redux';
import { createWrapper } from 'next-redux-wrapper';
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';
import { rootReducer, persistedReducer } from './modules';
import { persistStore, persistReducer } from 'redux-persist';

const makeConfiguredStore = (reducer) => createStore(reducer, undefined, applyMiddleware(logger));
const makeStore = () => {
  const isServer = typeof window === 'undefined';

  if (isServer) {
    return makeConfiguredStore(rootReducer);
  } else {
    // we need it only on client side3
    const store = makeConfiguredStore(persistedReducer);
    let persistor = persistStore(store, null);

    return { persistor, ...store };
  }
};

export const wrapper = createWrapper(makeStore, {
  debug: process.env.NODE_ENV !== 'production',
});

// _app.tsx

import Router from 'next/router';
import React from 'react';
import { wrapper } from '../store';
import { createStore } from 'redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider, useStore } from 'react-redux';
import { RootState } from 'store/modules';
import { AppContext, AppInitialProps } from 'next/app';
import { persistedReducer } from 'store/modules';
import Login from './admin/login';

function MyApp({ Component, pageProps }) {
  const Layout = Component.layout || (({ children }) => <>{children}</>);
  // const store = useStore();
  const store = createStore(persistedReducer);
  const persistor = persistStore(store);
  return (
    <PersistGate persistor={persistor}>
      <React.Fragment>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
          <title>Coala Admin</title>
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </React.Fragment>
    </PersistGate>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }: AppContext): Promise<AppInitialProps> => {
  console.log(Object.keys(ctx)); // can't find 'store'
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
};

export default wrapper.withRedux(MyApp);

The `MyApp.getInitialProps` should use `wrapper.getInitialAppProps` to wrap the function. See https://github.com/kirill-konshin/next-redux-wrapper#app. — juliomalves, Nov 09 '21 at 18:59
I posted an answer here that might help you: https://stackoverflow.com/questions/69711588/how-to-dispatch-an-action-from-inside-getinitialprops/70117124#70117124 — Afsanefda, Nov 25 '21 at 20:57

How to access store when server-side rendering in NextJS?

0 Answers0