Akita: ReactiveComponent Proposal

Created on 27 Nov 2019  路  1Comment  路  Source: datorama/akita

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Hi .I would like to know if this new feature could be included in akita, It is a way to connect the store to your components, in order to make the subscriptions in the template cleaner.
This is an example of the conference of Mike Ryan: https://www.youtube.com/watch?v=rz-rcaGXhGk, and the idea is to take this:

A

And end up doing this:

B

Of course, at the conference, this feature is intended for Angular 9. For the problems that can be solved for the changes detection (markDirty) and unsubscriptions.
Anyway I did a proof of concept with Angular 8. The only drawback is that I had to inject:


Something like this:

type ObservableDictionary<S> = { [P in keyof S]: Observable<S[P]> };

export abstract class ReactiveComponent<S> {
  readonly subs = new SubSink();
  protected constructor(private cd: ChangeDetectorRef) {}

  public connect(sources: ObservableDictionary<S>): S {
    const sink = {} as S;
    const sourceKeys = Object.keys(sources) as (keyof S)[];
    const updateSink$ = from(sourceKeys).pipe(
      mergeMap((key: any) => {
        return sources[key].pipe(tap(sinkValue => (sink[key] = sinkValue)));
      })
    );
    this.subs.sink = updateSink$.pipe(tap(() => this.cd.markForCheck())).subscribe();
    return sink;
  }

 public unsubscribe(): void {
     this.subs .unsubscribe();
 }
}

Of course, I have to inject into component the service ChangeDetectorRef and implement OnDestroy and call the unsubscribe function.
### This is just an idea to consider, we could avoid this:

C

Akita for me, is the best tool to manage the state today, and I wish I could have something like this.

Most helpful comment

Thanks for the suggestion. It should work only with Ivy. I belive that they'll implement a general solustion and not something specific to ngrx. If not, I will create it.

Don't worry, Akita never stays behind.

>All comments

Thanks for the suggestion. It should work only with Ivy. I belive that they'll implement a general solustion and not something specific to ngrx. If not, I will create it.

Don't worry, Akita never stays behind.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jvitor83 picture jvitor83  路  3Comments

stephencarr picture stephencarr  路  4Comments

hoisel picture hoisel  路  5Comments

bruceharrison1984 picture bruceharrison1984  路  6Comments

twittwer picture twittwer  路  7Comments