CODEWITHSUNDEEP
angularngrxngrx-storengrx-effectsngrx-entity
anupkumar
anupkumar

Reputation: 357

Creating different state for same component using NgRx

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 ?

Upvotes: 0

Views: 1516

Answers (3)

Chikakow
Chikakow

Reputation: 29

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

Upvotes: 2

Jyotirmoy Mukherjee
Jyotirmoy Mukherjee

Reputation: 5

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).

Upvotes: 0

timdeschryver
timdeschryver

Reputation: 15487

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
    }
  }
}

Upvotes: 3

Related Questions