Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🚀[FEATURE]: Per component instance #1000

Open
yadue opened this issue Apr 15, 2019 · 29 comments
Open

🚀[FEATURE]: Per component instance #1000

yadue opened this issue Apr 15, 2019 · 29 comments

Comments

@yadue
Copy link

yadue commented Apr 15, 2019

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
Copy link
Member

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

@yadue
Copy link
Author

yadue commented Apr 15, 2019

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

@splincode
Copy link
Member

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

@yadue
Copy link
Author

yadue commented Apr 16, 2019

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
Copy link

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
Copy link
Author

yadue commented Apr 22, 2019

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

@splincode splincode added discussion An issue that discusses design decisions. domain:docs labels Aug 4, 2019
@lpenet
Copy link

lpenet commented Sep 12, 2019

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

@arturovt
Copy link
Member

arturovt commented Sep 12, 2019

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
Copy link

lpenet commented Sep 16, 2019

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.

@splincode splincode added domain: core type: feature and removed discussion An issue that discusses design decisions. domain: docs labels Oct 22, 2019
@splincode splincode changed the title [Question] Per component instance 🚀[FEATURE]: Per component instance (add benchmark) Nov 4, 2019
@arturovt arturovt changed the title 🚀[FEATURE]: Per component instance (add benchmark) 🚀[FEATURE]: Per component instance Dec 18, 2019
@bredziniak
Copy link

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

@amakhrov
Copy link

amakhrov commented Aug 3, 2020

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
Copy link

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

@kembala
Copy link

kembala commented Oct 29, 2020

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
Copy link

tmtron commented Nov 18, 2020

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

@markwhitfeld
Copy link
Member

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
Copy link

tmtron commented Dec 20, 2020

also rx-angular could help

@AbdoDabbas
Copy link

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

@markwhitfeld
Copy link
Member

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
Copy link

Any update?

@markwhitfeld
Copy link
Member

@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
Copy link

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

@temka1234
Copy link

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
Copy link

Any updates? 😄

@ameryousuf
Copy link

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

@masood-src
Copy link

masood-src commented May 20, 2022

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
Untitled

@naeemb123
Copy link

naeemb123 commented Aug 6, 2022

@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
Copy link

coreConvention commented Oct 30, 2022

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
Copy link

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
Copy link

ghost commented Jun 20, 2023

I think the update is here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests