Getting the previous state instead of the latest one when accessing the state in a different component

[fimbres]

I'm building a multi step form managing all the field using zustand, but in one step doesn't seem to be setting the state, I used zukeeper to debug the store and it seems to be working as expected, but then I console.log the value of the state at the end of the wizard to create a row in my database. but instead I don't get the version with all the fields in there, the last step values are missing somehow. And actually I'm setting the state in the same way for all the steps.

Store code:

import { create } from "zustand";

import { Roles } from "@/data/roles";

export interface DateTimeDataStep {
  startDate: Date;
  endDate: Date;
  startTime: string;
  endTime: string;
};

export interface PeopleDataStep {
  name: string;
  email: string;
  role: Roles;
}

export interface WorkshopEntry {
  author?: string | null
  meeting_url?: string | null
  name?: string | null
  notes?: string | null
  place?: string[] | null
  project?: number | null
  end_datetime?: string | null
  start_datetime?: string | null
}

interface CreateWorkshopStore {
  loading: boolean;
  workshop: WorkshopEntry;
  dateTimeData: DateTimeDataStep | undefined;
  people: PeopleDataStep[];
  shouldGenerateMeetingUrl: boolean;
  clearWorkshop: () => void;
  setBasicInformation: (name: string, description?: string) => void;
  setDateTimeStepData: (data: DateTimeDataStep) => void;
  setDateAndTime: (startDate: string, endDate: string) => void;
  setPeople: (people: PeopleDataStep[]) => void;
  setPlace: (place: string[]) => void;
  setShouldGenerateMeetingUrl: (shouldGenerateMeetingUrl: boolean) => void;
  setMeetingLink: (meetingUrl: string) => void;
};

export const useCreateWorkshopWizard = create<CreateWorkshopStore>((set, get) => ({
  loading: false,
  workshop: {},
  dateTimeData: undefined,
  people: [],
  shouldGenerateMeetingUrl: true,
  setDateTimeStepData: (data) => {
    set({
      dateTimeData: data
    });
  },
  clearWorkshop: () => set({ workshop: {}, dateTimeData: undefined, people: [], shouldGenerateMeetingUrl: true, loading: false }),
  setBasicInformation: (name, description) => {
    set({
      workshop: {
        ...get().workshop,
        name,
        notes: description,
      }
    })
  },
  setDateAndTime: (startDate, endDate) => {
    set({
      workshop: {
        ...get().workshop,
        start_datetime: startDate,
        end_datetime: endDate,
      }
    })
  },
  setPeople: (people) => {
    set({
      people
    });
  },
  setPlace: (place) => {
    set({
      workshop: {
        ...get().workshop,
        place,
      }
    })
  },
  setShouldGenerateMeetingUrl: (shouldGenerateMeetingUrl) => {
    set({
      shouldGenerateMeetingUrl
    });
  },
  setMeetingLink: (meetingUrl) => {
    set({
      workshop: {
        ...get().workshop,
        meeting_url: meetingUrl
      }
    })
  },
}));

Example on how I'm calling every action:

const onSubmit = (values: FormType) => { // this works
    setBasicInformation(
      values.name,
      values.description,
    );

    form.reset();
  }

const onSubmit = (values: FormType) => { // somehow this doesn't 'set' the value
    if(values.type === "Online") {
      setMeetingLink(values.platform === 'Other' ? values.meetingUrl : '');
      setPlace([values.type, values.platform === 'Other' ? values.provider! : values.platform!]);
    }
    else {
      setPlace([values.type, values.address!]);
    }

    form.reset();
  }

zukeeper output:

console.logging the state doesn't have the property place or meetingUrl defined, but zukeeper does.

This doesn't make any sense lol, I'm using version 4.4.1

[dbritto-dev]

@fimbres btw, I would do some improvements:

setPlace: (place) => {
  set({
    workshop: {
      ...get().workshop,
      place,
    },
  })
}

// without immer
setPlace: (place) => {
  set(state => ({ 
    workshop: { 
      ...state.workshop, 
      place 
    } 
  }))
}

// with immer
setPlace: (place) => {
  set(state => {
    state.workshop.place = place
  })
}