Within my application, I am utilizing a signal store to effectively manage the state pertaining to projects and sites. The current implementation is as follows:
interface State {
selectedProject: Project | null,
selectedSite: Site | null,
projects: Project[],
sites: Site[],
}
export const Store = signalStore(
withState<State>({
selectedProject: null,
selectedSite: null,
projects: [],
sites: []
}),
withMethods(state => {
const sitesService = inject(SitesService);
const projectsService = inject(ProjectsService);
return {
loadSites: async () => {
const sites = await sitesService.getSites();
patchState(state, { sites });
},
loadProjectsBySiteId: async (siteId: number) => {
const projects = await projectsService.getProjectsBySiteId(siteId);
patchState(state, { projects });
},
setSelectedSite: (selectedSite: Site) => {
patchState(state, { selectedSite, selectedProject: null });
},
setSelectedProject: (selectedProject: Project) => {
patchState(state, { selectedProject });
}
};
}),
withHooks({
onInit({ loadSites }) {
loadSites();
}
})
);
My goal is to automatically load the projects whenever there is a change in the selectedSite. However, I am uncertain about the most effective approach to achieve this within the setup of my signal store.
I am contemplating between utilizing the withComputed feature or implementing the functionality within the setter setSelectedSite (to trigger a fetch or similar action).
What would be the best practice for loading projects based on the change in selectedSite in this scenario?