How can I utilize ngrx's new signalStore in Angular to fetch locations of arms, save them in the state, and replace a service with LOCATION_STORE after setting the locations on a map with markers? The challenge lies in waiting for the response of locations before making the switch.
export const LOCATION_STORE = signalStore(
{ providedIn: "root" },
withState(() => inject(LOCATION_STORE_INITIAL_STATE)),
withMethods((store, atmService: AtmsService = inject(AtmsService)) => ({
fetchLocations: rxMethod<void>(pipe(
debounceTime(300),
distinctUntilChanged(),
tap(() => patchState(store, { loading: true })),
mergeMap(() => atmService.getBranchesAndAtms().pipe(
tapResponse({
next: (locations: Array<LocationModel>) => {
const branches: Array<LocationModel> = locations.filter((res: LocationModel) => res.isBranch);
const atms: Array<LocationModel> = locations.filter((res: LocationModel) => !res.isBranch);
return patchState(store, { atms, branches })
},
error: (errorCode: string) => patchState(store, { error: errorCode }),
finalize: () => patchState(store, { loading: false })
})
))
)),
}))
)
# Implementation using Google Maps library
initiateMap(mapContainer: HTMLElement) {
return forkJoin([ this.getGoogleMap(mapContainer), this._atmService.getBranchesAndAtms() ]).pipe(
tap(([ googleMap, locations ]): void => {
const markers: Array<google.maps.Marker> = this.addMarkers(locations);
this.addMarkerClusterer(googleMap, markers);
})
)
}