"use client";

import { buildCreateSlice, asyncThunkCreator } from "@reduxjs/toolkit";

const createSliceWithThunks = buildCreateSlice({
  creators: {
    asyncThunk: asyncThunkCreator,
  },
});


const initialState = {
  user: {
    _id: "",
    fname: "",
    lname: "",
    email: "",
    streetAddress: "",
    postalCode: "",
    city: "",
    county: "",
    country: "",
  },
  loading: false,
  error: null,
};

const userSlice = createSliceWithThunks({
  name: "user",
  initialState,
  reducers: (create) => ({
    fetchUser: create.asyncThunk(
      async (_, thunkApi) => {
        const response = await fetch("/api/user");
        if (!response.ok) {
          throw new Error("Failed to fetch user data");
        }
        const userData = await response.json();
        console.log(userData);
        return userData;
      },
      {
        pending: (state) => {
          (state.loading = true), (state.error = null);
        },
        fulfilled: (state, action) => {
          state.loading = false;
          state.data = action.payload;
        },
        rejected: (state, action) => {
          state.loading = false;
          state.error = action.error.message;
        },
      }
    ),
  }),
});

export const { fetchUser } = userSlice.actions;
export default userSlice.reducer;

import { connectDb } from "@dbConfig/db";
import User from "@models/UserModel";
import { getServerSession } from "next-auth";
import { NextResponse } from "next/server";

export async function GET(req, res) {
  const session = getServerSession(); //using my session data from NextAuth to get email to find user in mongodb

  try {
    const email = (await session).user.email; //I don't know why prettier formatted this line like this, the code breaks if I change it.

    connectDb();

    const user = await User.findOne({ email });
    console.log(user);

    return NextResponse.json({ message: "User found:", user }, { status: 201 });
  } catch (error) {
    console.log(error);
  }
}

The call works perfectly, I am getting the user data from my database and can see it when I go to localhost:3000/api/user. The problem is when i try to get it using redux toolkit and then set my user state to the data received. When I check the redux dev tools in my browser, I can see the data, but it is only appearing under a data tab, and not actually updating state. I am at a loss for how to move forward. Any help is appreciated.  

"use client";

import { buildCreateSlice, asyncThunkCreator } from "@reduxjs/toolkit";

const createSliceWithThunks = buildCreateSlice({
  creators: {
    asyncThunk: asyncThunkCreator,
  },
});

const initialState = {
  user: {
    _id: "",
    fname: "",
    lname: "",
    email: "",
    streetAddress: "",
    postalCode: "",
    city: "",
    county: "",
    country: "",
  },
  loading: false,
  error: null,
};

const userSlice = createSliceWithThunks({
  name: "user",
  initialState,
  reducers: (create) => ({
    fetchUser: create.asyncThunk(
      async (_, thunkApi) => {
        const response = await fetch("/api/user");
        if (!response.ok) {
          throw new Error("Failed to fetch user data");
        }
        const userData = await response.json();
        console.log(userData);
        return userData;
      },
      {
        pending: (state) => {
          (state.loading = true), (state.error = null);
        },
        fulfilled: (state, action) => {
          state.loading = false;
          state.data = action.payload;
        },
        rejected: (state, action) => {
          state.loading = false;
          state.error = action.error.message;
        },
      }
    ),
  }),
});

export const { fetchUser } = userSlice.actions;
export default userSlice.reducer;

import { connectDb } from "@dbConfig/db";
import User from "@models/UserModel";
import { getServerSession } from "next-auth";
import { NextResponse } from "next/server";

export async function GET(req, res) {
  const session = getServerSession(); //using my session data from NextAuth to get email to find user in mongodb

  try {
    const email = (await session).user.email; //I don't know why prettier formatted this line like this, the code breaks if I change it.

    connectDb();

    const user = await User.findOne({ email });
    console.log(user);

    return NextResponse.json({ message: "User found:", user }, { status: 201 });
  } catch (error) {
    console.log(error);
  }
}

The call works perfectly, I am getting the user data from my database and can see it when I go to localhost:3000/api/user. The problem is when I try to get it using Redux-Toolkit and then set my user state to the data received. When I check the Redux-Devtools in my browser, I can see the data, but it is only appearing under a data property, and not actually updating state. I am at a loss for how to move forward. Any help is appreciated.