dispatch

[tarsisexistence]

I think we can design a much better way to dispatch the things

at least we have to think about that
I still keep in mind that we can leave it as it is.

There are several important factors to consider:

• size / complexity (should remain simple)
• decorators (still aren't stable)
• design (it should be comfortable to use without overheads)

[irustm]

I think we should look at angular ivy.

And make one decorator (example):

@Component({
...
})
@UseStoreon({
  states:['count'],
  dispatcher: 'dispatch'
})
export class FooComponent {
 public count: Observable<number>;
 public dispatch: Function;
}

and template:

<button (click)="dispatch('inc')">
<span>{{count | async}}</span>

like: https://ngxf.gitbook.io/platform/hooks/state-hook
without *useState directive

[tarsisexistence]

@irustm it would be fair if I ask -- will storeon/angular support older versions?
I mean, Angular without Ivy in the box.

Yeah, right now peerDependencies are pointed strictly to angular 8+, but not all of the angular projects use version 8

btw, I think your idea is pretty good

[irustm]

I want the storeon to be used only with Angular Ivy. I hope that Angular Ivy projects will really be 3Kb.

For the rest, there are other big solutions, like ngrx, ngxs, akita.

[Svetomechc]

@maktarsis I updated dispatch in #18 (if it gets merged) a little. Readme also:

@irustm you forgot to mention ngxf :D The idea you said above is actually similar to reducer hook.

[irustm]

@Svetomechc yeah, ngxf: #15 (comment)

like: https://ngxf.gitbook.io/platform/hooks/state-hook
without *useState directive

[Svetomechc]

@irustm oh, yeah, didn't see that.
I summon @thekiba! (:

[thekiba]

I think it should be like this:

@UseStoreon()
@Component({
  selector: 'app-foo',
  template: `
    <button (click)="inc()">
    <span>{{ count | async }}</span>
  `
})
class FooComponent {
  @StoreonState('count') count: StoreonState<State, 'count'>;
  @StoreonEvent('inc') inc: StoreonEventFn<Event>;
}

But I don't like when using decorators with expected types, because TypeScript unsupported type checking with it. So, we can use simple functions for this:

@UseStoreon()
@Component({
  selector: 'app-foo',
  template: `
    <button (click)="inc()">
    <span>{{ count | async }}</span>
  `
})
class FooComponent {
  // will select 'count' from state and returns Observable<State['count']>
  count = useStoreonState<State>('count'); 
  // will create EventFn<Event> function for using as dispatch
  inc = useStoreonEvent<Event>('inc');
}

@UseStoreon() decorator will inject Storeon inner our component, and process states and event hooks. But maybe is not needed, because we can use inject function from @angular/core to get dependencies in useStoreonState and useStoreonEvent hooks.