Handling form state with NGRX / @Effects

Question

I have a form and on submit I dispatch an action which is caught by an effect. The effect then does the http call. I'm wondering how off the back of this action completing / failing I would do the following:

show a success message once the action completes
reset all the fields ready for when the form is next used
show an error off the back of the action failing

I understand I could re-dispatch an action to populate the store with several flags success, error etc. However, resetting the form will probably be done by calling a function. Would it be acceptable to subscribe to the store and calling the relevant reset function in the child? It's almost as if I'd like components to be able to listen to actions just like effects can.

olsn olsn · Accepted Answer · 2017-03-16T14:03:46

If your effect-rest does not affect the store, but only should display a notification - then there are two ways I'd say:

1) Inject Actions in your component as you suggested yourself:

class SomeComponent {
    constructor(actions: Actions) {
        actions.ofType(SOME_EVENT)
            .do(myThing)
            .takeUntil(componentIsDestroyed)
            .subscribe();
    }
}

2) Or don't go the effects- and actions-way at all and just call a simple service-method:

class SomeComponent {
    constructor(myService: CoolService) {
    }

    onClick(): void {
        mySevice.makeRequest()
            .do(myThing)
            .subscribe();
    }
}

Handling form state with NGRX / @Effects

1 Answers