Within my application, I am retrieving a list of Vehicle IDs from my web API.

The problem arises when I attempt to add an ID to the list using the "add" button, as it simply adds an "undefined" value instead. However, when I directly subscribe to the service without involving ngrx store, the process works smoothly for both adding and deleting IDs.

Below are the snippets related to effects and reducers from ngrx store, along with my service and functions for adding and deleting:

//ngrx/store/effect
  @Injectable()
export class FavVehiclesIdEffects {
  constructor(
    private actions$: Actions,
    private vehicleService: VehicleService
  ) {}

  // Effects for loading favorite vehicles IDs
  @Effect()
  loadFavVehiclesId$ = this.actions$
    .ofType(favVehiclesIdAction.LOAD_FAVVEHICLES_ID)
    .pipe(
      switchMap(() => {
        return this.vehicleService.getFavourite().pipe(
          map(
            favVehiclesId =>
              new favVehiclesIdAction.LoadFavVehiclesIdSuccess(favVehiclesId)
          ),
          catchError(error =>
            of(new favVehiclesIdAction.LoadFavVehiclesIdFail(error))
          )
        );
      })
    );

  // Effects for adding favorite vehicles IDs
  @Effect()
  addFavVehiclesId$ = this.actions$
    .ofType(favVehiclesIdAction.ADD_FAVVEHICLES_ID)
    .pipe(
      map((action: favVehiclesIdAction.AddFavVehiclesId) => action.payload),
      switchMap(favvehiclesid => {
        return this.vehicleService.addVehicle(favvehiclesid).pipe(
          map(
            favvehicleid =>
              new favVehiclesIdAction.AddFavVehiclesIdSuccess(favvehicleid)
          ),
          catchError(error =>
            of(new favVehiclesIdAction.AddFavVehiclesIdFail(error))
          )
        );
      })
    );

  // Effects for deleting favorite vehicles IDs
  @Effect()
  deleteFavVehiclesId$ = this.actions$
    .ofType(favVehiclesIdAction.DELETE_FAVVEHICLES_ID)
    .pipe(
      map((action: favVehiclesIdAction.DeleteFavVehiclesId) => action.payload),
      switchMap(favvehiclesid => {
        return this.vehicleService.deleteVehicle(favvehiclesid).pipe(
          map(
            () =>
              new favVehiclesIdAction.DeleteFavVehiclesIdSuccess(favvehiclesid)
          ),
          catchError(error =>
            of(new favVehiclesIdAction.DeleteFavVehiclesIdFail(error))
          )
        );
      })
    );
}

---

//ngrx/store/reducer
export interface FavVehiclesIdState {
  entities: { [id: number]: Tracker };
  loaded: boolean;
  loading: boolean;
}

export const initialState: FavVehiclesIdState = {
  entities: {},
  loaded: false,
  loading: false
};

export function reducer(
  state = initialState,
  action: fromFavVehiclesId.FavVehiclesIdAction
): FavVehiclesIdState {
  switch (action.type) {
    case fromFavVehiclesId.LOAD_FAVVEHICLES_ID: {
      return {
        ...state,
        loading: true
      };
    }
    ...
  }
  return state;
}

export const getFavVehiclesIdEntities = (state: FavVehiclesIdState) =>
  state.entities;
...

---

//services.ts
getFavourite(): Observable<Tracker[]> {
    const url = `${this.API_URL}/favourites`;
    return this.http.get<Tracker[]>(url).pipe(
      tap(() => this.log(`fetched favVehicles id`)),
      catchError(this.handleError('getVehicles', []))
    );
  }

// Service for "add to favourite" button
  addVehicle(track: Tracker): Observable<Tracker> {
    const url = `${this.API_URL}/favourites`;
    const service = this.http.post<Tracker>(url, track, this.httpOptions).pipe(
      tap(_ => this.log(`adding vehicle id=${track.id}`)),
      catchError(this.handleError<Tracker>('addVehicle'))
    );
    console.log(service);
    return service;
  }

  // Service for "delete from favourite" button
  deleteVehicle(track: Tracker): Observable<Tracker> {
    const url = `${this.API_URL}/favourites`;
    const service = this.http.put<Tracker>(url, track, this.httpOptions).pipe(
      tap(_ => this.log(`deleted vehicle id=${track.id}`)),
      catchError(this.handleError<Tracker>('deleteVehicle'))
    );
    console.log(service);
    return service;
  }

---

 // component.ts
 addFav(event: VehicleDetail) {

      const temp = new Tracker();
      temp.id = event.id;

      // updating JSON file
      this.store.dispatch(new fromStore.AddFavVehiclesId(temp));

      this.store.dispatch(new fromStore.LoadFavVehiclesId());

    }
  }
  // Function for deleting selected vehicle from favorites
  deleteFav(event: VehicleDetail, text: string) {
      const temp = new Tracker();
      temp.id = event.id;

      // removing from JSON file
      this.store.dispatch(new fromStore.DeleteFavVehiclesId(temp));

      this.store.dispatch(new fromStore.LoadFavVehiclesId());

    }
  }

Although my GET method is functioning properly, I suspect that there might be issues in my mapping process, where I extract the ID from "VehicleDetail" and assign it to my custom type "Tracker". I have experimented with different approaches but remain perplexed, given that I followed a tutorial closely. The JSON file updates correctly, suggesting that the problem lies within my ngrx store implementation. Can anyone spot what's going wrong here? Please ask if you need any further clarification or details.

Update

https://i.sstatic.net/OQjgA.png

My entries seem to be undefined. Is there anything amiss in my reducer file?

To provide better context, below is my definition of the "Tracker" class:

export class Tracker {
  id: number;
}