Cache w Angularze

Potrzebuję napisać jakiś DataStore, w którym będę mógł przechowywać dane pobrane z API. Chciałbym też te dane móc modyfikować, tzn. np. wraz z wysłaniem żądania PUT zmieniać zawartość DataStore. Myślałem o napisaniu jakiejś abstrakcji nad mapą i wstrzykiwaniu jej do serwisów. Serwisy wiedziałyby o kluczach, pod którymi kryją się potrzebne im dane. Napisałem jeden taki serwis i już przy kilku metodach brzydko to wygląda. Da się to jakoś sensownie zrobić bez jakiegoś menadżera stanu? A jeśli nie, to co polecacie? NgRx vs NGXS?

getGroup(groupId: number) {
    const groupKey = this.getGroupKey(groupId);
    const storedGroup = this.store.get(groupKey);

    return storedGroup
      ? of(storedGroup)
      : this.http.get<Group>(`/api/groups/${groupId}`).pipe(
        tap(group => this.store.set(groupKey, group)));
  }

private getGroupKey(groupId: number) {
    return `GROUP_${groupId}`;
  }

Kolejna próba:

// group.service.ts

fetchGroup(groupId: number) {
  return this.http.get<Group>(`/api/groups/${groupId}`);
}

// group-store.service.ts

private groups: Map<number, Group>;

getGroup(groupId: number) {
  return this.groups.get(groupId);
}

setGroup(group: Group) {
  this.groups.set(group.id, group);
}

// group-facade.service.ts

getOrFetchGroup(groupId: number) {
  const storedGroup = this.groupStore.getGroup(groupId);

  if (storedGroup) return of(storedGroup);

  return this.groupService.fetchGroup(groupId)
    .pipe(tap(group => this.groupStore.setGroup(group))); 
}

Nic lepszego nie wymyślę. Ma to sens?

Okazuje się, że jednak nie wymyśliłem niczego dziwnego i coś podobnego ludzie faktycznie stosują. Zostawiam dla potomnych (o ile Angular będzie jeszcze używany): https://angular-academy.com/angular-architecture-best-practices/

https://github.com/angelnikolov/ngx-cacheable