Store: 🚀[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 :smile:

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.

[Sasmen]

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.

[kemenesbalazs]

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