Multiple instance

[dns-cpu]

Hi, i using akita in my microfrontend, currently,I'm discussing with my team for create multiple instances of my component. This implies "multiple" store instances for each microfrontend.

For example:

My component supports several types of business, which has its own id, style, texts etc.

So I have to display several instances of my component simultaneously, but each one with its own scope.

I know the store is singleton, but my question is if I can scope my store inside just each component instance.

I'm learning English, I'm a beginner, I apologize for my vocabulary.

[ghost]

@dns-cpu A store is just like a database. It dosn't have "scope". It is just a data store with whatever data you put into it.
Each of your components should query the store for a different Id. That way it only gets the data relevant for that id.

[zmpo]

@tevers-daf , @dns-cpu
Hello,
According to this document, the store has independent instance for each component we create. May be it works only in Angular.
In my scenario, i want to get a new store instance for each module we create, but i get shared store In AModule，and AModule in two place.

I have register store in AModule,
... providers: [TestStore, TestQuery] }) export class AModule { }
How to get a new store instance for each module we create ?
Thanks for your attention.

[zmpo]

@NetanelBasal

[ghost]

@zmpo ah yeah, sorry I was thinking of persisted stores (that's all I deal with). So sure, you could use providers to create a new instance of the store for each component. If you tried to persist the state though I think you might run into problems.

Using it this way is no different than any other injectable in Angular. You specify it on your providers and you get your own instance for that scope.

If this isn't working for you can you provide the code for how you defined your store as well.

[ghost]

@zmpo I just realised I hadn't read your problem properly. You talk about having 2 AModules on the page. So, I assume you have 2 router-outlets and both of them are displaying some component from the AModule.
I think if you move the providers: [TestStore, TestQuery] to your root component inside of the AModule it should work for you.

[zmpo]

@tevers-daf I'm very sorry for my late reply. I'm busy these days.

{

path: 'a',
children: [
  { path: '', component:  AComponent},
  { path: 'child', component:  ChildComponent},
]

},
There are routes in AModule, if i move the providers: [TestStore, TestQuery] to the root component(AComponent), the Store can not be used in ChildComponent.
May be i should change componet structure.

[ghost]

I think I'd need to see a bit more of an example before I can understand what you are trying to achieve.
If you put something together on stackblitz that shows your desired layout maybe I could offer a suggestion.

But essentially you have 3 options for scope.
root - one instance for the entire app
module - one instance for the entire module
component - on instance for the component scope

Child components basicallly look up the stack for injecting an instnace.
First they will check the parent component scope, then the module and then root.

If you want 2 totally separate AModules to be running, I've never done that so I'm not exactly sure if it works.
You would need two router-outlets and separate routing for them I assume.

It sounds like a very complicated way of doing things.
I would have a single store and use an identifier to distinguish which data should be loaded in the components.
Now it's simple.