Angular，保存 GET 响应的 ngrx 问题，使用嵌套数组存储

Question

效果：

getUserStatus$ = createEffect(() => this.actions$.pipe(
    ofType(getUserStatus),
    switchMap(_ => this.userApiService.getUserStatus().pipe(
        map(userStatusApiResponse = > getUserStatusSuccess({
            userStatusApiResponse
        })),
        catchError(error = > of(getUserStatusFailed({
            error
        })))))
));

服务：

public getUserStatus(): Observable<UserStatusApiResponse> {
    return this.httpClient.get<CommonResponse<UserStatusApiResponse>> (`$ {
        USER_STATUS_API
    }`).pipe(
        map(UserApiService.extractUserStatusApiResponse),
        catchError(commonApiError)
    );
}

用于提取 GET 响应的函数：

private static extractUserStatusApiResponse(response: CommonResponse<UserStatusApiResponse>): UserStatusApiResponse {
    return response.data;
}

获取响应

{
    "httpStatus": 200,
    "data": {
        "necessaryField1: "f1",
        "necessaryField2: "f2",
        "unecessaryField3: "f3",
        "unecessaryField4: "f4",
        "arrayUsers": [
            {
                "A": {
                    "a1": "aaa",
                    "a2": "bbb",
                    "a3": 0
                },
                "B": {
                    "b1": "aaa",
                    "b2": "bbb",
                    "b3": 0
                },
                "C": {
                    "c1": "aaa",
                    "c2": "bbb",
                    "c3": 0
                }
            }
        ]
    }
}

我需要从上面的对象下面的响应模型：

export interface UserStatusApiResponse {
    "necessaryField1: string;
    "necessaryField2: string;
    "arrayUsers": ArrayUsers[]
}

从哪里 arrayUsers 我只需要对象 A 和 B:

export interface ArrayUsers {
    a: A;
    b: B;
}

减速器：

on(getUserStatusSuccess, (state, action) = > ({
        ...state,
    error: null,
    necessaryArray: {
        necessaryField1: action.userStatusApiResponse.necessaryField1,
        necessaryField2: action.userStatusApiResponse.necessaryField2,
    },
    arrayUsers: action.userStatusApiResponse.arrayUsers
})),

我的问题：

无论 UserStatusApiResponse 是什么，我都有所有的网络响应。 UserStatusApiResponse 中没有的另一个字段会自动扩展商店。

如何正确处理以上问题？我想控制每个 object/array 的类型，但我总是在商店中看到所有对象。还有 unecessaryField3: f3, unecessaryField4: f4 和对象 C...

Answer 1

请记住，打字只是为了编译。它是用 JS 编译的，然后，你没有任何类型。

因此，如果您只需要特定的字段，那么您需要将您的响应映射到一个只有所需键的新对象。

所以 :

extractUserStatusApiResponse(response: ...){
   return {
      necessaryField1: response.data.necessaryField1,
      necessaryField2: response.data.necessaryField2,
      arrayUsers: response.data.arrayUsers.map(user => ({A:user.A, B:user.B}))
   }
}

Angular，保存 GET 响应的 ngrx 问题，使用嵌套数组存储

Angular, ngrx problem with save GET response, with nested array, to store

angular

ngrx

ngrx-store