angularngrxeffects

Using CreateEffect for multiple Action dispatch


I am new to using CreateEffect and it is very confusing to understand as most documentations I read are talking about using services. I don't know to tweak it to work for me.

I have two actions to dispatch simultaneously.

export const updateSubject = createAction(
    '[Student Update] Update subject',
    props<{subject: string}> ()
);

export const updatePoint = createAction(
    '[Student Update] Update point',
    props<{point: number}> ()
);

So, this is what I did but was flagged as bad practice


public onSubmit(){
        
        this.store.dispatch(
            updateSubject({ 
                subject: this.subject,
            })
        );
        
        this.store.dispatch(
            updatePoint({ 
                point : this.point,
            })
        );
    
    }

Effects

  updateSubject$ = createEffect(() => this.actions$.pipe(
        ofType(updateSubject),
        
    
    ))
   

I got lost here and don't know what to do hence. I will appreciate any help.

I read this but lost as there are no other details to help understand how those variables are used and where they are coming from Documentation


Solution

  • The main reason why this is a lint rule, is because we encourage devs to use actions as "events". As something that has happened.

    This, makes it easier to react to changes (now and in the future). For your case, this would mean a "FormSubmitted" action that holds the properties of the updated form.

    You can still have two effects that listen to that action, one to update the subject, the other to update the point.