angular - 如何与ngrx一起创建或删除多个数据?
问题描述
结合所有“通量体系结构”(actions
,effects
等reducers
...),rxjs
我正在尝试创建和/或删除多个数据。
我有以下问题:
- 如何在后台和状态实体中创建或删除多个数据?
- 我一直在研究,有人说要使用 forkJoin,但它如何与通量架构一起使用?
- 如何实时接收这些数据并让其他请求等待它们到达?
这是我正在做的一个例子:
后端服务:
create(peoples: Array<IPeople>): Observable<Array<IPeople>> {
const https = [];
peoples.forEach((people) => https.push(this.httpClient.post<IPeople>(this.endpoint, people)));
return forkJoin([]);
}
效果
createAll$ = createEffect(() =>
this.action$.pipe(
ofType(fromPeopleActions.CREATE),
mergeMap((action) => {
return this.backend.create(action.people).pipe(
map((people) => fromPeopleActions.CREATE_SUCCESS({ people })),
catchError((error) => of(fromPeopleActions.CREATE_FAIL({ error: this.requestHandler.getError(error) })))
);
})
)
);
减速器:
const peopleReducer = createReducer(
INIT_STATE,
on(fromPeopleAction.GET_ALL_SUCCESS, fromPeopleAction.CREATE_SUCCESS, fromPeopleAction.DELETE_SUCCESS, (state, { peoples }) => adapter.addMany(peoples, { ...state, loading: false })),
on(fromPeopleAction.GET_ALL_FAIL, fromPeopleAction.CREATE_FAIL, fromPeopleAction.DELETE_FAIL, (state, { error }) => ({ ...state, error, loading: false }))
);
称呼
ngOnInit(): void {
this.peopleDispatchService.getAll();
this.peopleSelectorsService.loading.subscribe((isLoading) => {
if (!isLoading) {
this.peopleSelectorsService.total.subscribe((total) => {
console.log(total);
if (total === 0) {
this.peopleDispatchService.create([
{ id: '0', isMain: true, name: 'THIAGO DE BONIS CARVALHO SAAD SAUD', avatar: 'assets/users/thiagobonis.jpg', messages: null },
{ id: '1', isMain: false, name: 'BILL GATES', avatar: 'assets/users/billgates.jpg', messages: null },
{ id: '2', isMain: false, name: 'STEVE JOBS', avatar: 'assets/users/stevejobs.jpg', messages: null },
{ id: '3', isMain: false, name: 'LINUS TORVALDS', avatar: 'assets/users/linustorvalds.jpg', messages: null },
{ id: '4', isMain: false, name: 'EDSGER DIJKSTRA', avatar: 'assets/users/dijkstra.jpg', messages: null },
])
} else {
this.peopleSelectorsService.allIds.subscribe((ids) => this.peopleDispatchService.delete(ids.toString()));
}
});
}
});
}
解决方案
你做的几乎是对的
create(people: Array<IPeople>): Observable<Array<IPeople>> {
return forkJoin(
...people.map(person => this.httpClient.post<IPeople>(this.endpoint, person)),
);
}
也fromPeopleAction.DELETE_SUCCESS
和addMany
声音奇怪在一起。我会为它添加一个独立on
的。
现在 create 将导致创建请求。
如何在后台和状态实体中创建或删除多个数据?
- 你这样做的方式很好。
我一直在研究,有人说要使用 forkJoin,但它如何与通量架构一起使用?
- 检查我上面的例子
如何实时接收这些数据并让其他请求等待它们到达?
- 更好的是有一个请求来获取所有数据,然后将响应转换为许多操作,如 ADD_MANY 等。或者
forkJoin
如果您的后端不提供用于批量数据交换的单个端点,则使用它。
推荐阅读
- .net - 如何正确测试 Test AuthorizationHandler
- javascript - 为什么我的组件没有在 App.vue 中导入?
- javascript - 从数组中随机绘制而不回退
- python - 列表中日期时间之间的差异
- parsing - 为具有适当优先级(包括括号)的二进制表达式创建语法
- if-statement - 将 IF 条件应用于 3 行并在条件满足时返回另一个单元格的另一个值
- python - Heroku 构建失败并显示“推送被拒绝,无法编译 Python 应用程序”。
- google-apps-script - 在 Google Apps Script 网络应用程序中,得到 redirect_uri_mismatch,但我什至可能不在正确的轨道上
- jakarta-ee - 如何在 WildFly 16 中配置 redshift XADatasource
- postgresql - 如何获取 PostgeSQL 中任何字符的代码点和 utf8 编码