Add values to an array inside an object in Zustand state

Question

I'm having a user object saved in Zustand state and it contains an array with the list of the user's favorite movies (the empty placeholder is replaced upon login). However, for some reason, Zustand is unable to recognize the user object, claiming that it doesn't exist when I try to use it in the setFavoriteMovie function. But you can clearly see that it's right there as shown in the code below. What am I doing wrong? All help is appreaciated.

import { create } from "zustand";
import { UserObject } from "../pages/login";

interface Store {
  user: UserObject;
  setUser: (data: any) => void;
  setFavoriteMovie: (id: number) => any;
}

const emptyUserObject = {
  username: "",
  email: "",
  name: "",
  favoriteMovies: [],
};

const userStore = create<Store>((set, get) => ({
  user: emptyUserObject,
  setUser: (data: UserObject) => {
    set(() => ({ user: data }));
  },
  setFavoriteMovie: (id: number) => {
    set((state) => ({
      user.favoriteMovies: [...state.user.favoriteMovies, id],
    })),
  }
}));

Answer 1

You'll need to merge the nested properties of the user explicitly by using the spread operator:

...
const userStore = create<Store>((set, get) => ({
 ...
 setFavoriteMovie: (id: number) => {
    set((state) => ({
      user: {
        ...state.user,
        favoriteMovies: [...state.user.favoriteMovies, id]
      }
    }))
  },
}));

You can find more information in the zustand docs for nested objects.