angularngrx-storengrx-effects

Ngrx createEffect type error after angular 15->16 update


I'm currently trying to update an application from angular 15 -> 16. However with the new type enforcements in ngrx I'm getting compiler errors that I'm not managing to figure out the solution for.

Historically we had

//Actions:
export const RESET_ORDER_IDENTIFIER = '[ServiceProvisioning] Reset order identifier';
export const RESET_ORDER_IDENTIFIER_SUCCESS = '[ServiceProvisioning] Reset order identifier success';

export const resetOrderIdentifier = createAction(RESET_ORDER_IDENTIFIER);
export const resetOrderIdentifierSuccess = createAction(RESET_ORDER_IDENTIFIER_SUCCESS, props<{ orderIdentifier: string}>());

//Effect:
  resetOrderIdentifier$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(ServiceProvisioningActions.resetOrderIdentifier),
      map(() => {
        //generateGUID() returns a random string (not an observable)
        return ServiceProvisioningActions.resetOrderIdentifierSuccess({orderIdentifier: this._utilsService.generateGUID()});
      })
    );
  });

this gives the error

Argument type () => 
Observable<{orderIdentifier: string} & TypedAction<"[ServiceProvisioning] Reset order identifier success">> 
is not assignable to parameter type () => 
(Observable<{orderIdentifier: string} & TypedAction<"[ServiceProvisioning] Reset order identifier success">> & 
ConditionallyDisallowActionCreator<DispatchType<EffectConfig & 
{functional?: false}>, Observable<{orderIdentifier: string} & 
TypedAction<"[ServiceProvisioning] Reset order identifier success">>>)

Another createEffect giving me trouble is

//Actions:
export const SET_SELECTED_SERVICE_TYPE_ACTION = '[ServiceProvisioning] Set selected service type';
export const SET_SELECTED_SERVICE_TYPE_ACTION_SUCCESS = '[ServiceProvisioning] Set selected service type success';
export const setSelectedServiceType = createAction(SET_SELECTED_SERVICE_TYPE_ACTION, props<{ selectedServiceType: ServiceProvisioningState['selectedServiceType'] }>());
export const setSelectedServiceTypeSuccess = createAction(SET_SELECTED_SERVICE_TYPE_ACTION_SUCCESS, props<{ selectedServiceType }>());


//Effect:
  setSelectedServiceType$ = createEffect( () => {
    return this.actions$.pipe(
      ofType(ServiceProvisioningActions.setSelectedServiceType),
      switchMap( ({ selectedServiceType }) => {
        let pageTitle = selectedServiceType.includes('foo') ? 'foo bar' : 'bar';
        this._store.dispatch(ServiceProvisioningActions.setPageTitle({pageTitle}));
        return of (ServiceProvisioningActions.setSelectedServiceTypeSuccess({selectedServiceType}));
      })
    );
  });

Gives a similar error

Argument type () => 
Observable<{selectedServiceType} & TypedAction<"[ServiceProvisioning] Set selected service type success">> 
is not assignable to parameter type () => 
(Observable<{selectedServiceType} & TypedAction<"[ServiceProvisioning] Set selected service type success">> & 
ConditionallyDisallowActionCreator<DispatchType<EffectConfig & {functional?: false}>, Observable<{selectedServiceType} &
 TypedAction<"[ServiceProvisioning] Set selected service type success">>>) 

Any help with migration docs that mention this that I'm failing to find, or how these functions are meant to be written would be appreciate, Cheers. Note: I have left out the reducer/state as I don't think the problem is related to how those are set up and wanted post to be to the point, but can add if required


Solution

  • Closing this off.

    Combination of above fix's (some cases had to be changed from returning arrays of subs to single sub to work ) as well as replacing instances of 'return of(foo)' with sub.next() or store dispatch.