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

Question

Effect:

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

Service:

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

Function for extracting GET response:

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

GET response

{
    "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
                }
            }
        ]
    }
}

I need from above object below response model:

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

Where from arrayUsers I need only object A and B:

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

Reducer:

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

My problem:

Always in store I have all network responses, irrespective of UserStatusApiResponse. Another field, which is not in UserStatusApiResponse automatically expands the store.

How can I properly handle above problem? I would like to control the type of each object/array, but always in store I see all objects. Also with unecessaryField3: f3, unecessaryField4: f4 and object C...

@altu I think, it is not important in that case. There is simple action which only handling rest query in effect-service. export const getUserStatus= createAction( '[USER_API] User status' ); — profiler
– profiler, Commented Nov 14, 2019 at 21:26
I was asking about getUserStatusSuccess, although I could deduct it from the reducer or effect it's still just guesswork. On 2nd sight there are 2 ways to solve this. Mapping a partial response from the complete response.data or creating a selector for only the sought after part/s. — user12207064
– user12207064, Commented Nov 15, 2019 at 9:14

Wandrille · Accepted Answer · 2019-11-14 20:26:55Z

1

Keep in mind that the typing is just for the compilation. It's compiled in JS and then, you haven't any type.

So if you want only particular fields, then you need to map your response to a new object with only the wanted keys.

So :

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

answered Nov 14, 2019 at 20:26

Wandrille

6,9274 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

profiler Over a year ago

Thank You. But... What is the proper way? It is good solution: creating, in my case, userStatusApiResponse model? Or just get all response without checking anything?

Wandrille Over a year ago

If you have a control on All your data in your code, this is less error prone. And by control, I mean that you have exacly what you want. What you have done so far is good. But with the mapping, it will be better :)

profiler Over a year ago

So, when I have very big rest response. And I need, f.e. 80% of data from the response, I need mapping object by object etc.?

Wandrille Over a year ago

It will be cleaner if you want to control all your flow

profiler Over a year ago

Thank you so much. I thought it is too much code, and I did ev. wrong.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related