Using RTK with Nextjs

A straight forward example of using Redux Tool Kit with Nextjs app. redux/hooks.js 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(); redux/store.js import { configureStore } from "@reduxjs/toolkit"; import userReducer from "../features/user/userSlice"; export const makeStore = () => { return configureStore({ reducer: { user: userReducer, //list more if any } }) } redux/StoreProvider.js '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 {children} } features/user/userSlice.js 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; _app.js import StoreProvider from "../redux/StoreProvider"; import { SessionProvider } from "next-auth/react"; function MyApp({ Component, pageProps: { session, ...pageProps } }) { return ( ) } export default MyApp; On components: 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 }));

Mar 21, 2025 - 07:26

A straight forward example of using Redux Tool Kit with Nextjs app.

redux/hooks.js

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();

redux/store.js

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/user/userSlice";

export const makeStore = () => {
  return configureStore({
    reducer: {
      user: userReducer,
      //list more if any
    }
  })
}

redux/StoreProvider.js

'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 {children}
}

features/user/userSlice.js

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;

_app.js

import StoreProvider from "../redux/StoreProvider";
import { SessionProvider } from "next-auth/react";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  return (
   
    
     
    
   
  )
}
export default MyApp;

On components:

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 }));