0

i made a looong research and i cant make a successful integration with next-redux-wrapper, redux-toolkit and rtk query.

i want to call getServerSideProps in the next component to load the userData, the thing is that i actually cant make something successful

    const ToDoComponent = dynamic(() => import("../components/ToDoComponent"), {
  loading: () => <NextNProgress />,
})

const ToDo = () => {
  const username = useSelector((state) => state.useReducer.username)
  const { isMobileState } = useIsMobile()
  //const { data: darkmode} = useGetUserDarkModeQuery(username) /* i want to make those two calls before showing the todoComponent */
  //useGetUserListsQuery(username) /* this one tho */
  //wanna make those tho queries on getServerSideProps func
  setNextTheme(darkmode)
  useRedirect()

  return (
    <>
      <ToDoComponent isMobileState={isMobileState} darkmode={darkmode} />
    </>
  )
}


export async function getServerSideProps() {
  store.dispatch(listsApi.endpoints.getUserLists.initiate("hardcoded username"))
     //this doesnt work, store is not defined, i try using wrappedStore but the actuall func has an error
}
Lucas
  • 27
  • 6
  • The contents of your post doesn't seem to have anything to do with the title of the post. What are you actually want to do, what problems are you facing, what did you try in the past and what does TypeScript have to do with it? – phry Apr 02 '23 at 09:31
  • I know it can be a little bit confusing, but the thing is I want to do ssr with next redux and rtk query, the thing with ts is that every example that I seen with those 3 thins is build with ts, i don’t know ts so I can use it, sorry if the question is bad or I’m expressing bad – Lucas Apr 03 '23 at 00:05
  • TypeScript is just JavaScript with a little extra behind a `:`. With a little practice you should be able to read TypeScript, even as a JavaScript developer. If you need help translating, you can always copy-paste TS code into [this TypeScript Playground](https://www.typescriptlang.org/play?target=99#code/Q) and it will output plain JavaScript for you to the right. – phry Apr 03 '23 at 06:44
  • But still: it is not obvious at all from this post what the explicit problem is you want to solve, what you have tried, where you are not progressing, etc. If you want people to give you specific help here, you need to ask a question that is possible to understand and answer. – phry Apr 03 '23 at 06:45
  • maybe now, i simplify a lot – Lucas Apr 03 '23 at 15:44
  • Your right i change the title to delete "whitout type", the thing here is that i cant find a example on how to call the api in getServerSideProps() – Lucas Apr 03 '23 at 15:49
  • This documentation page contains a link to an example repo: https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering – phry Apr 03 '23 at 21:53

1 Answers1

-1

To access the store in getServerSideProps, you have to wrap that function like shown in the next-redux-wrapper docs:

export const getServerSideProps = wrapper.getServerSideProps(store => ({req, res, ...etc}) => {
  store.dispatch(listsApi.endpoints.getUserLists.initiate("hardcoded username"))
  await Promise.all(dispatch(listsApi.util.getRunningQueriesThunk()))
});
phry
  • 35,762
  • 5
  • 67
  • 81
  • I'm getting "dispatch is not defined", I'm getting really frustrated with this – Lucas Apr 04 '23 at 03:06
  • im gonna let you a pr to actually see the code, https://github.com/lucasscurtoo/to-do-webApp/pull/16 – Lucas Apr 04 '23 at 04:15
  • You did skip half of the setup for `redux-next-wrapper`. https://github.com/kirill-konshin/next-redux-wrapper#wrapperusewrappedstore You need to call `useWrappedStore` in your App component and wrap the application in a `Provider`. – phry Apr 04 '23 at 08:20
  • hey, how is it going, i really never can do it, so i decided to show a load screen, i see that u are the creator of rtk query, thats awesome, actually thanks a lot for your help, im going to retry this in another personal project, and this time do it right, thanks for helping the community! – Lucas Apr 10 '23 at 15:23