Using CreateEffect for multiple Action dispatch

Question

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

IMO, there is nothing wrong with dispatching multiple actions from an event as long as the data affected by the actions is not interdependent where you can end up with race conditions. It is however, bad practice to dispatch multiple actions from an effect. — Brandon Taylor, Nov 23 '22 at 14:41
One use case of Effects is to make service calls when actions are dispatched, however an effect can respond to almost *any* event. In the effect would be your handler for success/fail of what function/method called in the effect. From there you would dispatch an action for success/fail. Typically the success/fail action would affect data in state via a reducer. — Brandon Taylor, Nov 23 '22 at 14:43
There is nothing wrong with your code, only as stated before this can cause some side effects like race conditions. Why not just create new action called for example `updatePointAndSubject` and call just this action with two params? In your effects, you could still have two effects, listening to action `ofType(updatePointAndSubject)` — smithnblack, Nov 23 '22 at 16:31

score 1 · Accepted Answer · answered Nov 23 '22 at 20:28

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.

Using CreateEffect for multiple Action dispatch

1 Answers1