我开始将ngrx实现为一个新的企业角度应用程序。我正在将数据加载到商店中,其效果很简单,可以进行服务调用
@Effect()
loadCheckin$ = this.actions$.ofType(checkInActions.LOAD_CHECK_IN)
.pipe(
switchMap(() => {
return this.checkInService.getCheckIn()
.pipe(
map(checkIn => {
return new checkInActions.LoadCheckInSuccess(checkIn)}),
catchError(error => of(new checkInActions.LoadCheckInFail(error)))
);
})
);
服务器返回到我的成功动作的响应是一个大对象,包含我前端商店不需要的许多属性。
我喜欢这样的前端状态界面:
export interface AppointmentState {
checkIn: fromCheckIn.CheckInState;
action: fromAction.ActionState;
billing: fromBilling.BillingState;
clinical: fromClinical.ClinicalState;
documents: fromDocuments.DocumentsState;
};
这些状态切片中的每一个都有自己的接口。所有这些都是基于前端需求而不是后端的结构而构建的。
我努力理解的是我们在后端和前端之间匹配数据的方式。当我从后端加载那个巨大的对象时,即使我只需要一些属性,reducer是否是创建和返回为状态正确构造的东西的正确位置?是否有任何理由保持与后端响应完全匹配的状态?围绕这个还有其他最佳实践吗?
答案 0 :(得分:1)
以下是两个热门指南: https://redux.js.org/ https://gist.github.com/btroncone/a6e4347326749f938510
当我从后端加载那个巨大的对象时,即使我只需要一些属性,reducer是否是创建和返回为状态正确构造的东西的正确位置?
来自https://redux.js.org/docs/basics/Reducers.html
Reducers指定应用程序的状态如何响应发送到商店的操作而改变。
有时,操作具有用于修改状态的关联有效负载。从数据库加载数据时,我发现这通常意味着将数据转换为您想要的形状。所以减速器是进行变换的好地方。
通常我会在我的API层中做一些映射到某个中间模型甚至是状态模型,而reducer主要只是设置,添加,删除或替换。这是因为我在应用程序中有其他操作将修改相同的状态片段,并且我不希望有多个操作使用不同的有效负载执行相同的操作或将用户数据映射到API DTO的形状只是为了更新状态。这取决于您的需求,但您可以在减速器之前或之中进行。在映射到视图模型时,您可能会在投影中进行其他转换。
有没有理由保持与后端响应完全匹配的状态?
我无法想到一个充分的理由。您可能不必对其进行转换,但这取决于数据的形状以及您在应用中想要的形状。您的应用程序的需求应该推动您的状态。为了便于更新和选择以及避免不需要的更改通知,规范化数据非常重要。
以下是关于规范化状态的一个很好的参考:https://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html 以下是有关ngrx实体功能的一些文档,您可能希望使用它们来减少一些样板: https://github.com/ngrx/platform/blob/master/docs/entity/README.md