angular - Angular ngrx add/del 返回未定义
问题描述
在我的应用程序中,我有一个从我的 web api 获得的车辆 ID 列表。
问题是,每当我按下“添加”按钮将 ID 添加到列表中时,它只会向其添加“未定义”。每当我只是使用我的普通服务并在我的 add 方法中订阅它时,它都可以正常工作。我的删除方法也是如此。
下面我介绍来自ngrx store、我的服务和我的add/del函数的效果和reducer。
//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());
}
}
我的 get 方法工作正常,从来没有问题。我一直想知道我做的映射(我采用“VehicleDetail”并将其 ID 删除到我的 Tracker 类型中,这是一个只有属性“id”的对象)是否会导致一些问题,我尝试了一些变体,但总体而言自从我跟随教程学习以来,我很迷茫。我的 JSON 文件得到正确更新,所以我相信问题出在我的 ngrx 商店的某个地方。这里有什么问题?如果你想让我澄清一些事情,请告诉我。
更新
我的条目设置为未定义。有没有人注意到我的减速器文件有问题?
我的跟踪器如下所示,以使一切更加清晰:
export class Tracker {
id: number;
}
解决方案
我认为您在减速器中添加车辆的逻辑应如下所示:
case fromFavVehiclesId.ADD_FAVVEHICLES_ID_SUCCESS: {
const favvehiclesid = action.payload;
const entities = [...state.entities, favvehiclesid];
return {
...state,
entities
};
}
推荐阅读
- oracle11g - 如何使用 Group by 子句简化 SQL 内部联接以提高 Oracle 的性能
- python - f.tell() 返回一个过高的数字
- node.js - How to test my node/express app is making an API call (through axios)
- java - java.nio.file 包未检测到目录更改
- java - 通过抛出异常将 spring-data-jpa 升级到 1.11.13.RELEASE 顺序
- c# - 如何在Visual Studio项目c#中引用包含的文件
- linux - 如何更改 gitolite 上的存储库位置?
- email - 在 iframe 中跟踪邮件公式的事件
- python - python的币安加密警报机器人
- javascript - 当我应用条件跳过键为偶数的数组值时,为什么会得到空结果?