NGRX how to dispatch multiple actions on submission in specific order

Question

I'm new to ngrx, and trying to redesign my complex template driven form into using ngx-formly and ngrx. I am stuck on the form submission because of a complex business rule we have in place Basically, right before submission, I need to modify some of the data that was entered in the form because our api needs some data that the form does not provide, or needs it formatted differently based on conditions.

So I created a reducer function to handle that data manipulate:

export const submitToRmv = (state: RmvServicesState, action) => {
let vehicleArray = [...state.rmvData.rmvServicesUserEnteredData.vehicles];
const transactionType = state.rmvData.transactionType;
if (transactionType === 'PrefillRegistrationTransfer' || vehicleArray[0].reassignedPlate === 'Y') {
  //data manipulation is here, but removed just to simplify example
}
vehicleArray = [...vehicleArray, ...state.rmvData.rmvServicesUserEnteredData.tradeInVehicles];

const newTransactionType = transactionType === 'PrefillNewTitleAndRegistration' || transactionType === 'PrefillRegistrationTransfer' &&
vehicleArray[0].reassignedPlate === 'Y' ? 'Reassign' : transactionType.replace('Prefill', '');

return {
  ...state,
  rmvData: {
    ...state.rmvData,
    transactionType: newTransactionType,
    rmvServicesUserEnteredData: {
      ...state.rmvData.rmvServicesUserEnteredData,
      vehicles: vehicleArray,
    },
  },
};

I also created the effect to get triggered when submission occurs

  rmvSubmit$ = createEffect(() => {
return this.actions$.pipe(
  ofType(RmvPrefillActions.validationSubmission),
  mergeMap((value) =>
  this.rmvService.getReadySubmit(value.getReadyRequest)
  .pipe(map(res => RmvPrefillActions.validationResponse({response: res}))
  )
));

});

But I am stuck trying to figure out how to get my action to trigger before the effect does. My issue is that if I use the same action for both the reducer and effect, when submission occurs, it seems to be triggering the effect first, then the reducer, but if I create a different action for the reducer, I am stuck trying to figure out where to dispatch the action because I need to the reducer to change the state, then call the effect with that new state passed into the http service call

Please format your code and set typescript as language. A well formatted question is more likely to be answered. — Deitsch, May 17 '22 at 15:57
Actions always run before Effects [ngrx-order-of-execution-of-reducers-and-effects](https://stackoverflow.com/questions/59996873/ngrx-order-of-execution-of-reducers-and-effects). That's your desired order, isn't it? — Deitsch, May 17 '22 at 16:00

score 0 · Answer 1 · answered May 17 '22 at 18:58

Not sure what you mean, but an action is always dispatched to the reducers first, and only if all reducers processed the action then the effects are executed.

From the docs https://ngrx.io/guide/effects#writing-effects :

An injectable Actions service that provides an observable stream of all actions dispatched after the latest state has been reduced.

NGRX how to dispatch multiple actions on submission in specific order

1 Answers1