如何仅使用从后端选择的属性以在 ngrx 商店中使用

Question

我开始将 ngrx 实现到一个新的企业 Angular 应用程序中。我正在将数据加载到存储中，并带有一个简单的服务调用效果
@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 是否是创建和返回为状态正确构造的东西的正确位置？是否有任何理由保持与后端响应完全匹配的状态？有没有其他最佳实践？

Answer 1

这里有两个受欢迎的指南： https://redux.js.org/ https://gist.github.com/btroncone/a6e4347326749f938510

当我从后端加载那个巨大的对象时，即使我只需要一些属性，reducer 是否是创建和返回为状态正确构造的东西的正确位置？

来自https://redux.js.org/docs/basics/Reducers.html

Reducer 指定应用程序的状态如何更改以响应发送到存储的操作。

有时，该操作具有用于修改状态的关联有效负载。从数据库加载数据时，我发现这通常意味着将数据转换为您想要的形状。因此，reducer 是进行转换的好地方。

通常我会在我的 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