🚀[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.