🚀[FEATURE]: Per component instance

[yadue]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior

How to do per component store instance? Is it even possible?

Imagine that you built some large scale, drawing app using ngxs all works great and fast. Some day your boss tells you that he want's to compare drawing so you decide (more or less) to duplicate your main board.component.ts, it still has to use ngxs - you dont want to rewrite whole app but each instance of BoardComponent should have own instance of the stores, own data.

Ideally what I need to achive is to have 3 store instances:

• root, being accessible by all components
• board 1 store: only accessible by component and it's children
• board 2 store: only accessible by component and it's children

Board 1 & Board 2 have to be exactly the same stores, with the same states, actions but different data.

Is it possible to create store per component like creating services in angular per instance?

@Component({`
    selector: 'board',
    providers: [
       CommentsService,  // this is completely  new instance and does not share any data with other board components,
    ]
})

Environment

Libs:

• @angular/core version: 7.2.11
• @ngxs/store version: 3.4.3

[splincode]

We plan to work on this, most likely it will appear after integration with the ivy renderer

[yadue]

@splincode thanks for the response, any workarounds or any tips how could I approach this with current version?

[splincode]

Unfortunately, there is no clear decision on how this can be done outside the redux pattern.

[yadue]

So maybe something different, so my root store has multiple stores like:

{
   comments: {
    comments: []
    filter: {}
  },
   settings: {},
   users: {},
}

Instead of creating separate store instances I was thinking about redefining the store to something like that:

{
   comments: {
    app1: {
      comments: [],
      filter: {}
    },
    app2: {
      comments: [],
      filter: {}
    }, 
  },
  settings: {
    app1: {},
    app2: {}
  },
  users: {
    app1: [],
    app2: []
  }
}

but in that case I loose all features of @select:

@Select('state.comments')
comments: Observable<IComment[]>;

would give me comments store with substores.

I could of course do parametrized @selector and subscribing but imo I'm the biggest advantage of ngxs to avoid unecessary boilerplate.

Maybe there are other better approches how to do this?

[evgeniyefimov]

We had similar use case with Ionic pages, when the same page may be opened multiple times in the same navigation stack and each page should have own state. We solved this with page settings entity, but it's not convenient (we were using ngrx, then migrated to ngxs). Separate state for component instance could help us a lot.

[yadue]

@evgeniyefimov could you share an example how did you do this in code?

[lpenet]

Is there something new on this question ? It would be really great.

[arturovt]

Is there something new on this question ? It would be really great.

Unfortunately, not yet. Give us a little time 😄

This is complicated to implement. We could have added this feature long time ago if it was easy. I'm willing to take a vacation and to start working on the design document :)

[lpenet]

I know that it is not easy. :-) That's why I am interested.
Do not hesitate to share the design document, I guess we might be quite a few ready to discuss it.

[bredziniak]

What is the status of work on this feature? When can you expect it? it's a great idea!

[amakhrov]

It seems that the main challenge is accessing an instance of the Store inside the decorator. Currently it's done via global static properties of SelectFactory. It effectively restricts the app to have a single store, if I read it correctly.

I'm wondering if it's possible to get Store via DI (using some DI metadata stored in injectable instances).

[temka1234]

You can use ngxs in bundle with @ngrx/component-store, but without ngxs plugins supporting.

[kembala]

One could extend the selector decorator functionality to access a part of the store specific to that component.
https://github.com/ngxs/store/blob/master/packages/store/src/decorators/select/select.ts

Select has access to the object via "this", where adding and id could make the requesting component unique and identifiable within the store.

Maybe this idea is too far of a stretch. Any thoughts? :)

[tmtron]

It seems that this is the same idea as ngrx component store - maybe the link can help in the design process.

[markwhitfeld]

I plan to work on this in December. Please respond to this comment with the 🚀 emoji if you would like to be contacted to give feedback on the design document when I have prepared it?

[tmtron]

also rx-angular could help

[AbdoDabbas]

First, thanks all for your efforts.
Any update on this feature?

[markwhitfeld]

Hi Everyone. I am working on a local state library that will satisfy this need. It is in early alpha, so if you are interested please DM me on twitter (https://twitter.com/MarkWhitfeld) and I'll show you what it is about and you can give your thoughts and feedback.

[gtteamamxx]

Any update?

[markwhitfeld]

@gtteamamxx Yeah, a lot is going on at the moment to get this local state library ready to release.
I'll post here once we have our first public release.

[luchian94]

meanwhile does anyone know if using ngrx/component-store with ngxs can cause some issues or it's fine?

[temka1234]

meanwhile does anyone know if using ngrx/component-store with ngxs can cause some issues or it's fine?

Used in few my projects and didn't have any problems. This libs are independent

[JohnSutray]

Any updates? 😄

[ameryousuf]

@markwhitfeld Do we have any update, please?
Please let me know if I can help with anything. Thanks!

[masood-src]

I solved this problem by adding an instance name to component and all action should pass the instance name and in state when I want to set state I use instance name to separate data of each instance so when you subscribe to select or action should check the instance name before that you do anything
I don't know it's a good approach or no!
@markwhitfeld

[naeemb123]

@markwhitfeld Any updates on this?? This is the only thing stopping me from using NGXS as I really need this feature 🥲

I was hoping this feature would be easier to build now that Angular 14 has standalone components, but I doubt it crosses over

[coreConvention]

Very interested in seeing this feature! We switched from ngrx to ngxs for it's ease of use for newer developers and so far it's been great, with the exception of this one specific thing. We ended up just using services with behavior subjects for some of these use cases, which is not ideal obviously, but fortunately the use cases were very simple. We didn't want to reintroduce ngrx just for this. Please let us know if there's anything we can do to help to this along.

[paulchartres]

Also looking for updates on this. I'm working on a reusable, very complex component for Angular that relies on ngxs for state management, and I simply cannot have multiple instances of the same component on the same page. Willing to help however I can if possible.

[ghost]

I think the update is here