Creating different state for same component using NgRx

Question

My scenario is to create a different independent states of same component, so when anything changes on one component cannot affect other component states.

The problem i am facing is whenever i am changing anything in one component its updating other component state also

In my case is i am creating a datatabs where i am loading same components dynamically with different array of objects data. So if i update any data in one tab , the other tab should not be affected.

Is it possible with NgRx ?

score 3 · Answer 1 · answered Jan 25 '20 at 17:42

I wrote down different approaches in Managing different slices of the same NgRx state.

You have to store the state by their id:

{
  "counters": {
    "31cd7f19-559e-4d77-8899-97797368b8c4": {
      "count": -1
    },
    "ca6184a4-10cf-473c-b1f6-6bb73ab20679": {
      "count": 4
    },
    "1caf0bc3-1414-4221-ae1d-a94f99ced451": {
      "count": 0
    }
  }
}

score 2 · Answer 2 · answered Dec 22 '20 at 22:31

Ngrx introduced @ngrx/component-store in Angular 10. This makes keeping state per component easier. You can use it like a reactive service that you inject into your component and provide in the component.

It's important to provide in the component so that states are kept per component and not one global state like regular ngrx state.

https://ngrx.io/guide/component-store

Jyotirmoy Mukherjee · Answer 3 · 2020-01-25T19:23:32.140

0

Yes this is possible by having a service between the component and the NgRx store. Basically the service here would act like a data provider to the component (Imagine a separate service per tab, each service knowing which store morel to use).

edited Jan 25 '20 at 19:23

answered Jan 25 '20 at 15:05

Jyotirmoy Mukherjee

5
1
4

thanks for quick response , but my component is created dynamically and i don't have a separate service for each dynamic component . – anupkumar Jan 25 '20 at 15:15
Could you please share the approach you are using to create the components. Even if you are using dynamic rendering, still you can inject various services to the components – Jyotirmoy Mukherjee Jan 25 '20 at 19:24

Creating different state for same component using NgRx

3 Answers3