multi instances store and what is good way to handle multiple data source

[hdvinh361989]

I have 2 cases:

1. I have a model named "account", I need to call many requests to /tags endpoint to fill additional information into account (it is optional). Currently, I create a method on tag service to handle it as below

this._tagsSer
      .fillInstall(this.install, [
        PZ_TAGS.firstName,
        PZ_TAGS.lastName,
        PZ_TAGS.country,
        PZ_TAGS.email,
        PZ_TAGS.language,
      ])
      .subscribe();

So my question is: is it a best practice or do I need to handle it in "account" service or "account" store?

2. I have 2 components A and B use tag service and tag store, each of them uses a different set of data ( different query params ). Currently, I used the code below to create instances for tag store.

tag.repository.ts

function newStore<SDef extends typeof config, State extends typeof state>(
  name: string
): Store<SDef, State> {
  return new Store({ state, name: `${storeName} [${name}]`, config });
}

export class TagRepo {
  _store = newStore(this._name);

  tags$ = this._store.pipe(selectAll());
  isPending$ = this._store.pipe(selectIsRequestPending(TagRequests.default));

  //Fill tag into a install
  isFillInstallPending$ = this._store.pipe(
    selectIsRequestPending(TagRequests.fillInstall)
  );

  trackTagRequestStatus = createRequestsStatusOperator(this._store);

  constructor(private _name: string) {}

  set(tags: Tag[]) {
    return this._store.update(
      setEntities(tags),
      updateRequestStatus(TagRequests.default, 'success')
    );
  }

  updateStatusSuccess(key: string) {
    return this._store.update(updateRequestStatus(key, 'success'));
  }

  get store() {
    return this._store;
  }
}

export function TAG_REPO_PROVIDER_FACTORY(name: string): Provider {
  return { provide: TagRepo, useFactory: () => new TagRepo(name) };
}

a.component.ts

const name = 'Component A';
@Component({
  selector: 'pz-a',
  providers: [
    TagDataAccessModule.forChild({ name }),
  ],
})

b.component.ts

const name = 'Component B';
@Component({
  selector: 'pz-b',
  providers: [
    TagDataAccessModule.forChild({ name }),
  ],
})

TagDataAccessModule.forChild({ name }) will return tag service and tag store provider.
My question is: is it a good approach? How can I do better?

[NetanelBasal]

Hi,

As for the first question, API requests should be handled by a service.

As for the second question, tags belong to an account if I understand correctly. Assuming that's the case, and the only thing you need to do is fetch them from the server and add them to the account, why not just use one Account store?

[hdvinh361989]

Thanks for your answers. Maybe my question is not clear, I will clarify my first question as below

1. What is a good way to handle a model with multiple data sources?

In this case, the Account model needs to fetch /account, /tags, /billing endpoint to get information. /tags and /billing endpoint does not belong to Account, it can be used without Account.id. Currently, I handled it in component

account-detail.component.ts

this.accountSer.get( id )
.pipe( 
  tap( account => {
       this.tagSer.fillAccount( account );
       this.billingSer.fillAccount( account );
  } ) 
)

The second question, it's about the local state of component. I got the answer here https://datorama.github.io/akita/docs/angular/local-state/

[NetanelBasal]

You should handle it in the service.

Regarding the second question, the answer is the same.