import{fetchContent}from"./thunkActions";import{createReduxFetch}from"next-redux-fetch";exportconststore=createReduxFetch({reducer: {}},// add in the basic configure store props.{thunkActions: { fetchContent },},);// Infer the `RootState` and `AppDispatch` types from the store itselfexporttypeRootState=ReturnType<typeofstore.getState>;// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}exporttypeAppDispatch=typeofstore.dispatch;
....
3) Declare your client side component in a bootstrap file, or whatever name you prefer.
"use client";importdynamicfrom"next/dynamic";importReactfrom"react";constDemo=dynamic(()=>import("../../components/demo"),{ssr: false,});exportdefaultfunctionBootstrap({ data }: {data: Record<string,any>}){return<Demodata={data}/>;}
4) Declare getData callback as followed:
import{store}from"../../../redux/store/store";importBootstrapfrom"./bootstrap";asyncfunctiongetData(){constres=awaitstore.dispatch(store.thunkActions.fetchContent());returnres;}exportdefaultasyncfunctionPage(){constdata=awaitgetData();// destructure data prop on the component your using it on e.g data?.payload.return<Bootstrapdata={data}/>;}