Using RTK with Nextjs

import { useDispatch, useSelector, useStore } from "react-redux"; // Use throughout the app instead of plain `useDispatch` and `useSelector` export const useAppDispatch = useDispatch.withTypes(); export const useAppSelector = useSelector.withTypes(); export const useAppStore = useStore.withTypes(); 

import { configureStore } from "@reduxjs/toolkit"; import userReducer from "../features/user/userSlice"; export const makeStore = () => { return configureStore({ reducer: { user: userReducer, //list more if any } }) } 

'use client' import { useRef } from 'react' import { Provider } from 'react-redux' import { makeStore } from './store' export default function StoreProvider({ children }) { const storeRef = useRef() if (!storeRef.current) { // Create the store instance the first time this renders storeRef.current = makeStore(); } return <Provider store={storeRef.current}>{children}</Provider> } 

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; //import axiosConfig as well const initialState = { userInfo: {}, isUserLoggedIn: false, isUserInfoLoading: true, //..add more state variables }; const reducers = { setUserInfoResponse: (state, action) => { state.userInfo = action.payload; state.isUserLoggedIn = true; state.isUserInfoLoading = false; }, //...add more functions to update state }; export const userSlice = createSlice({ name: "user", initialState, reducers, }); export const getUserInfo = createAsyncThunk( "user/getUserInfo", async (params, { dispatch }) => { const { uid } = params; const userInfoResponse = await axiosConfig.get( `get_user_info/${uid}`, ); if (userInfoResponse.data.status) { dispatch(setUserInfoResponse(userInfoResponse.data.data)); } } ); export const { setUserInfoResponse, //list other functions defined above if any } = userSlice.actions; export default userSlice.reducer; 

import StoreProvider from "../redux/StoreProvider"; import { SessionProvider } from "next-auth/react"; function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( <SessionProvider session={session}> <StoreProvider> <Component {...pageProps} /> </StoreProvider> </SessionProvider> ) } export default MyApp; 

import { useAppDispatch, useAppSelector } from "../../redux/hooks"; import { getUserInfo } from "../../features/user/userSlice"; ... const dispatch = useAppDispatch(); const { isUserLoggedIn, isUserInfoLoading, userInfo } = useAppSelector(state => state.user); inside useEffect or any logic: dispatch(getUserInfo({ uid: 123 }));