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
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.