NGXS updating state using operators and then persisting data to firebase

Question

I've got a action type class to update a user:

export class Update {
    public static readonly type = '[Users] Update';
    constructor(public readonly id: string, public readonly changes: Partial<User>) {}
}

And the following is action:

@Action(Update)
public update({ getState, setState }: StateContext<UsersStateModel>, { id, changes }: Update) {
    setState(
        patch({
            users: updateItem(u => u.id === id, patch(changes))
        })
    );

    // const userToUpdate = getState().users.find(u => u.id === id);

    // return this.userService.update(userToUpdate);
}

However I can't wrap my head around how to properly send this data to my http service. All other examples I've found include sending data first to the backend and only then assigning result to state.

The code that is commented does the job, but does not feel right. Any suggestions how to make this work properly?

Answer 1

Do you mean this maybe?

@Action(Update)
public update({ getState, setState }: StateContext<UsersStateModel>, { id, changes }: Update) {
  const currentUser = getState().users.find(u => u.id === id);
  const userWithAppliedChanges = { ...currentUser, ...changes };
  return this.userService.update(userWithAppliedChanges).pipe(
    map(updatedUser => setState(...)),
    catchError(() => EMPTY)
  );
}