如何仅使用来自后端的 select 属性用于 ngrx 存储
How to use only select properties from a backend for use in an ngrx store
我开始将 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)))
);
})
);
此 return 服务器对我的成功操作的响应是一个大对象,其中包含我的前端存储不需要的许多属性。
我想要这样的前端状态界面:
export interface AppointmentState {
checkIn: fromCheckIn.CheckInState;
action: fromAction.ActionState;
billing: fromBilling.BillingState;
clinical: fromClinical.ClinicalState;
documents: fromDocuments.DocumentsState;
};
这些状态片中的每一个都有自己的接口。所有这些都是根据前端的需求构建的,而不是后端的样子。
我很难理解的是我们在后端和前端之间匹配数据的方式。当我从后端加载那个巨大的对象时,即使我只需要一些属性,reducer 是否是正确的创建位置和 return 为状态正确构造的东西?是否有任何理由保持与后端响应完全匹配的状态?是否还有其他最佳实践?
这里有两个受欢迎的指南:
https://redux.js.org/
https://gist.github.com/btroncone/a6e4347326749f938510
When I'm loading up that huge object from the backend, even though I only need a few of the properties, is the reducer the correct place to create and return something that is properly constructed for the state?
来自https://redux.js.org/docs/basics/Reducers.html
Reducers specify how the application's state changes in response to actions sent to the store.
有时该操作具有用于修改状态的关联负载。从数据库加载数据时,我发现这通常意味着将数据转换为您想要的形状。所以减速器是进行转换的好地方。
我经常会在我的 API 层中做一些映射到一些中间模型甚至状态模型,而 reducer 主要只是设置、添加、删除或替换。这是因为我在应用程序中有其他操作会修改同一个状态片,我不想让多个操作用不同的有效负载做同样的事情,或者将用户数据映射到 API DTO 只是为了更新状态。这取决于您的需要,但您可以在减速器之前或在减速器中进行。当您映射到视图模型时,您的投影可能会有额外的变换。
Is there any reason to keep a state that exactly matches the backend response?
我想不出一个很好的理由。您可能不必对其进行转换,但这取决于您的数据的形状以及您在应用程序中想要的形状。你的应用程序的需求应该驱动你的状态的形状。规范化您的数据以便于更新和选择并避免不需要的更改通知很重要。
这里有一个关于规范化状态的很好的参考:https://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html
以下是有关 ngrx 实体功能的一些文档,您可能希望使用这些文档来减少一些样板文件:
https://github.com/ngrx/platform/blob/master/docs/entity/README.md
我开始将 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)))
);
})
);
此 return 服务器对我的成功操作的响应是一个大对象,其中包含我的前端存储不需要的许多属性。
我想要这样的前端状态界面:
export interface AppointmentState {
checkIn: fromCheckIn.CheckInState;
action: fromAction.ActionState;
billing: fromBilling.BillingState;
clinical: fromClinical.ClinicalState;
documents: fromDocuments.DocumentsState;
};
这些状态片中的每一个都有自己的接口。所有这些都是根据前端的需求构建的,而不是后端的样子。
我很难理解的是我们在后端和前端之间匹配数据的方式。当我从后端加载那个巨大的对象时,即使我只需要一些属性,reducer 是否是正确的创建位置和 return 为状态正确构造的东西?是否有任何理由保持与后端响应完全匹配的状态?是否还有其他最佳实践?
这里有两个受欢迎的指南: https://redux.js.org/ https://gist.github.com/btroncone/a6e4347326749f938510
When I'm loading up that huge object from the backend, even though I only need a few of the properties, is the reducer the correct place to create and return something that is properly constructed for the state?
来自https://redux.js.org/docs/basics/Reducers.html
Reducers specify how the application's state changes in response to actions sent to the store.
有时该操作具有用于修改状态的关联负载。从数据库加载数据时,我发现这通常意味着将数据转换为您想要的形状。所以减速器是进行转换的好地方。
我经常会在我的 API 层中做一些映射到一些中间模型甚至状态模型,而 reducer 主要只是设置、添加、删除或替换。这是因为我在应用程序中有其他操作会修改同一个状态片,我不想让多个操作用不同的有效负载做同样的事情,或者将用户数据映射到 API DTO 只是为了更新状态。这取决于您的需要,但您可以在减速器之前或在减速器中进行。当您映射到视图模型时,您的投影可能会有额外的变换。
Is there any reason to keep a state that exactly matches the backend response?
我想不出一个很好的理由。您可能不必对其进行转换,但这取决于您的数据的形状以及您在应用程序中想要的形状。你的应用程序的需求应该驱动你的状态的形状。规范化您的数据以便于更新和选择并避免不需要的更改通知很重要。
这里有一个关于规范化状态的很好的参考:https://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html 以下是有关 ngrx 实体功能的一些文档,您可能希望使用这些文档来减少一些样板文件: https://github.com/ngrx/platform/blob/master/docs/entity/README.md