How to use `getInitialProps` on [id] page in nextjs with redux wrapper?

Viewed 25

The getInitialProps work in the pages/_app.tsx

type TProps = AppPropsTypes & {
  example: string;
};
export function MyCustomApp({ Component, pageProps, example }: TProps) {
  return (
    <Layout {...pageProps}>
    <Component {...pageProps} />
  </Layout>
  );
}
MyCustomApp.getInitialProps = wrapper.getInitialPageProps(
  ({ dispatch }) =>
    async () => {
      await dispatch(addInitialSources('book'))
      await dispatch(addCategoriesMenu('book'))
    }
);

export default wrapper.withRedux(MyCustomApp);

Now I need to do a similar thing on pages/[id]/index.tsx

const SinglePage: NextPage = () => {
    return (
        <>
           ...
        </>
    )
}
SinglePage.getInitialProps = wrapper.getInitialPageProps(
    ({ dispatch }) =>
        async () => {
            console.log('TEST TEST TEST TEST TEST TEST TEST TEST TEST')
            await dispatch(addInitialSources('book'))
        }
);
export default SinglePage

It seems getInitialProps doesn't run at all (the console log doesn't show in the terminal at all)


When I had a simple wrapper in pages/_app.tsx the above singlePage would work:

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default wrapper.withRedux(MyApp)

But I needed to dispatch an initial state from _app

0 Answers
Related