Platform: Add a Local State API for Component Local States

[MikeRyanDev]

We should consider adding an API that allows developers to manage local component state.

See: https://paper.dropbox.com/doc/NgRx-Local-Store-CskwmD7OBGca1YvMKVuPw?_tk=share_copylink

[MattiJarvinen]

👍 for handling the simple local component state.

❓ How would you test component state "reducers". https://github.com/ngrx/platform/blob/local-state/example-app/app/books/containers/collection-page.spec.ts doesn't have one.

[MikeRyanDev]

Removing this from 6.x for now. We think that future changes to Angular's API might less us tackle this feature in a more reactive way.

[jack-guy]

Hi @MikeRyanDev, do you have any information on what those changes might look like? I'm very interested in this pattern.

[aochagavia]

What is the status of this issue? The description in DropboxPaper seems to address the issue quite well and there is even an experimental branch for it (https://github.com/ngrx/platform/tree/local-state). Is there anything I could do to help push this forward?

[trinhvanhuy]

HI @MikeRyanDev do we have any alternatives to LocalState for now ? I really want to use this pattern in my project

[sebitsi]

Hi @MikeRyanDev.

Is there any progress on this issue ?
Any new and aditional informations will be desirable. Roadmap ?

We think that future changes to Angular's API might less us tackle this feature in a more reactive way.

What do you mean by that ?

Thanks for advance.

[krasnyuk]

Simple local state component implementation (not tested):
`
export abstract class LocalStateComponent implements OnInit {
protected abstract initialState: T;
private stateSource = new BehaviorSubject(null);
private state: Observable = this.stateSource.asObservable().pipe(filter(Boolean));

ngOnInit(): void {
this.setState(this.initialState);
}

protected selectFromState(propertyName: keyof T): Observable return this.state.pipe(
pluck(propertyName),
distinctUntilChanged(),
);
}

protected patchState(statePartial: Partial < T > ): void {
const currentState: T = this.stateSource.value;
const newState: T = { ...currentState, ...statePartial };
this.setState(newState);
}

protected setState(state: T): void {
this.stateSource.next(state);
}
}
`

[temka1234]

Is there any progress on this feature?

I want to make web application with multigroup architecture.
Group can be added or removed to app dynamically at runtime.
Each group must have its own snapshot of global state and react to effects and reducers.

Example:

State interface
  User
  SelectedOrder
  OrdersHistory

User opened two groups of panels at same time.

First group: User info panel + Selected order panel

State of group 1
  User: #1
  SelectedOrder: 5
  OrdersHistory: []

Second group: User info panel + History list panel

State of group 2
  User: #3
  SelectedOrder: null
  OrdersHistory: [list for user #3]

How it can be done without local state feature?
Thanks

[brandonroberts]

Closing as Component Store is going to be the local state package