SolidJS•2y ago

How to update nested store values such that it triggers updates

I have a store with the shape IUserState. Now I want to update some projectGroup to add a new project to it. How can I achieve this so that updates are triggered?

export interface IUserState {
  projectGroups: IProjectGroup[];
}

export interface IProjectGroup {
  name: string;
  projects: IProject[];
}

export type IProject =
  | {
      name: string;
      description: string;
      logs: IActivityLog[];
    } & Xor<
      { paid: true; hourlyRate: number; currency: string },
      { paid: false }
    >;

export interface IUserState {
  projectGroups: IProjectGroup[];
}

export interface IProjectGroup {
  name: string;
  projects: IProject[];
}

export type IProject =
  | {
      name: string;
      description: string;
      logs: IActivityLog[];
    } & Xor<
      { paid: true; hourlyRate: number; currency: string },
      { paid: false }
    >;

I tried this, it does update the store but doesn't trigger updates.

setUserState(
  "projectGroups",
  produce((projectGroups) => {
    projectGroups[groupIndex].projects = [
      ...projectGroups[groupIndex].projects,
      (formData.paid
        ? {
            name: formData.name,
            description: "",
            paid: true,
            logs: [],
            hourlyRate: formData.hourlyRate,
            currency: formData.currency,
          }
        : {
            name: formData.name,
            description: "",
            logs: [],
            paid: false,
          }) as IProject,
    ];
  })
);

setUserState(
  "projectGroups",
  produce((projectGroups) => {
    projectGroups[groupIndex].projects = [
      ...projectGroups[groupIndex].projects,
      (formData.paid
        ? {
            name: formData.name,
            description: "",
            paid: true,
            logs: [],
            hourlyRate: formData.hourlyRate,
            currency: formData.currency,
          }
        : {
            name: formData.name,
            description: "",
            logs: [],
            paid: false,
          }) as IProject,
    ];
  })
);

Thanks for any assitance 🙂

3 Replies

Alex Lohr•2y ago

You can use the normal setter to achieve this:

setUserState(
  "projectGroups",
  groupIndex,
  "projects",
  userState.projectGroups[groupIndex].projects.length,
  (formData.paid ...)
);

setUserState(
  "projectGroups",
  groupIndex,
  "projects",
  userState.projectGroups[groupIndex].projects.length,
  (formData.paid ...)
);

Raqueebuddin AzizOP•2y ago

That worked. Thank you so much, I was losing my mind all day over this. is there a way to mark the thread as solved or do I just leave it like that?

Alex Lohr•2y ago

I think there's a small gray checkmark at the top left of the interface.

Gaming

Programming

How to update nested store values such that it triggers updates