Angular ngrx add / del返回未定义

Question

In my app I have a list of Vehicle IDs which I get from my web api.

The issue is that whenever I press my "add"-button to add an ID to my list it just adds a "undefined" to it. Whenever I'm just using my plain service and subscribe to it inside my add method it works fine. Same goes for my delete method.

Below I present the effect and reducer from ngrx store, my service, and my add/del function.

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

  @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))
          )
        );
      })
    );

  @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))
          )
        );
      })
    );

  @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
      };
    }
    case fromFavVehiclesId.LOAD_FAVVEHICLES_ID_SUCCESS: {
      const favvehiclesid = action.payload;
      const entities = favvehiclesid.reduce(
        (entity: { [id: number]: Tracker }, favvehicleid: Tracker) => {
          return {
            ...entity,
            [favvehicleid.id]: favvehicleid
          };
        },
        {
          ...state.entities
        }
      );

      return {
        ...state,
        loaded: true,
        loading: false,
        entities
      };
    }
    case fromFavVehiclesId.LOAD_FAVVEHICLES_ID_FAIL: {
      return {
        ...state,
        loaded: false,
        loading: false
      };
    }

    case fromFavVehiclesId.ADD_FAVVEHICLES_ID_SUCCESS: {
      const favvehiclesid = action.payload;
      const entities = {
        ...state.entities,
        [favvehiclesid.id]: favvehiclesid
      };

      return {
        ...state,
        entities
      };
    }

    case fromFavVehiclesId.DELETE_FAVVEHICLES_ID_SUCCESS: {
      const favvehiclesid = action.payload;
      const { [favvehiclesid.id]: removed, ...entities } = state.entities;
      return {
        ...state,
        entities
      };
    }
  }
  return state;
}

export const getFavVehiclesIdEntities = (state: FavVehiclesIdState) =>
  state.entities;
export const getFavVehiclesIdLoaded = (state: FavVehiclesIdState) =>
  state.loaded;
export const getFavVehiclesIdLoading = (state: FavVehiclesIdState) =>
  state.loading;

---

//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;

      // adding to json file
      this.store.dispatch(new fromStore.AddFavVehiclesId(temp));

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

    }
  }
  // Button function which deletes the selected vehicle from your favourites
  deleteFav(event: VehicleDetail, text: string) {
      const temp = new Tracker();
      temp.id = event.id;

      // deleting from json file
      this.store.dispatch(new fromStore.DeleteFavVehiclesId(temp));

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

    }
  }

My get method works fine and have never been a problem. I have been wondering if my mapping I do (I take a "VehicleDetail" and remove its ID into my Tracker type, which is a object with only the property "id") causes some issues, and I have tried some variants, but overall Im quite lost since I followed along in a tutorial. My JSON file gets updated correctly, so I believe the problem in somewhere in my ngrx store. What is wrong here? If you want me to clarify something please let me know.

Update

My entries are set to undefined. Is there anyone who have noticed something wrong with my reducer file?

My Tracker is presented below to make everything slightly more clear:

export class Tracker {
  id: number;
}

Answer 1

I think your logic in the reducer for adding a vehicle should look like the following:

case fromFavVehiclesId.ADD_FAVVEHICLES_ID_SUCCESS: {
  const favvehiclesid = action.payload;
  const entities = [...state.entities, favvehiclesid];
  return {
    ...state,
    entities
  };
}