How to share state between nextjs pages with next-redux-wrapper?

Question

I have this home page

const Home: NextPage = () => { 
  return (<> <Link href='/2'><a>Go to page 2</a></Link> </>)
}

Home.getInitialProps = wrapper.getInitialPageProps(
  ({ dispatch }) =>
    async () => {
      await dispatch(addInitialSources('book'))
      await dispatch(addCategoriesMenu('book'))
    }
);
export default Home

Note the two actions dispatched. That sets the initial state of the entire app.

When we go to [id]/index.tsx, I need the store to have the same initial state as requested from the home page. I could just copy the above

const SecondPage: NextPage = () => { 
  return (<> <Link href='/'><a>Go Home</a></Link> </>)
}

SecondPage.getInitialProps = wrapper.getInitialPageProps(
  ({ dispatch }) =>
    async () => {
      await dispatch(addInitialSources('book'))
      await dispatch(addCategoriesMenu('book'))
    }
);
export default SecondPage

Is there a way to call/set those dispatches in a way that they aren't being called on every page?

This is the pages/_app.tsx setup if needed.

import 'tailwindcss/tailwind.css';
import type { AppProps } from 'next/app'
import { wrapper } from "@store/store" 
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default wrapper.withRedux(MyApp)

score 1 · Answer 1 · answered Sep 18 '22 at 10:04

You can call them inside _app.tsx with getInitialProps, you should just be aware of that this will disable automatic static optimisation. The dispatch you make inside here will be dispatched globally on each page request and available inside nested page levels.

Example code from https://github.com/kirill-konshin/next-redux-wrapper#app:

# pages/_app.tsx

import React from 'react';
import App, {AppInitialProps} from 'next/app';
import {wrapper} from '../components/store';
import {State} from '../components/reducer';

// Since you'll be passing more stuff to Page
declare module 'next/dist/next-server/lib/utils' {
    export interface NextPageContext {
        store: Store<State>;
    }
}

class MyApp extends App<AppInitialProps> {

    public static getInitialProps = wrapper.getInitialAppProps(store => async context => {

        store.dispatch({type: 'TOE', payload: 'was set in _app'});

        return {
            pageProps: {
                // https://nextjs.org/docs/advanced-features/custom-app#caveats
                ...(await App.getInitialProps(context)).pageProps,
                // Some custom thing for all pages
                pathname: ctx.pathname,
            },
        };

    });

    public render() {
        const {Component, pageProps} = this.props;

        return (
            <Component {...pageProps} />
        );
    }
}

export default wrapper.withRedux(MyApp);

How to share state between nextjs pages with next-redux-wrapper?

1 Answers1