Separate on() function outside of createReducer() function in ngrx - ngrx

Question

Is it possible to separate out the on() parameters from the createReducer() function.
For example, instead of this;
const yourInformationReducer = createReducer<IYourInformationState>(
initYourInformationState,
on(YourInformationStoreAction, (state, { payload }) => ({
...state,
...payload
}))
);
Define a constant for the on() function;
const onYourInformationStoreAction = on<IYourInformationState>(
YourInformationStoreAction,
(
state: IYourInformationState,
{ payload }: { payload: IYourInformationFormModel }
) => ({
...state,
...payload
})
);
Then reference it in the createReducer;
const yourInformationReducer = createReducer<IYourInformationState>(
initYourInformationState,
onYourInformationStoreAction
);
The problem I have is that when I set the type for the payload object in the separated out function, it gives a typescript error that I don't know how to deal with...
Error:(16, 2) TS2345: Argument of type '(state: IYourInformationState,
{ payload }: { payload: IYourInformationFormModel; }) => { name:
string; email: string; contactNumber: string; validityStatus:
ValidityStatus; }' is not assignable to parameter of type
'ActionCreator> |
OnReducer>]>'. Type '(state:
IYourInformationState, { payload }: { payload:
IYourInformationFormModel; }) => { name: string; email: string;
contactNumber: string; validityStatus: ValidityStatus; }' is not
assignable to type 'ActionCreator>'.
Property 'type' is missing in type '(state: IYourInformationState, { payload }: { payload: IYourInformationFormModel; }) => { name:
string; email: string; contactNumber: string; validityStatus:
ValidityStatus; }' but required in type 'TypedAction'.

Answer 1

Figured it out...
function onYourInformationInitAction() {
return on(YourInformationInitAction, (state: IYourInformationState) => ({
...state
}));
}
function onYourInformationStoreAction() {
return on(
YourInformationStoreAction,
(state: IYourInformationState, { payload }) => ({
...state,
...payload
})
);
}
function onYourInformationValidityStatus() {
return on(
YourInformationUpdateValidityStatusAction,
(state: IYourInformationState, { validityStatus }) => ({
...state,
validityStatus
})
);
}
const yourInformationReducer = createReducer<IYourInformationState>(
initYourInformationState,
onYourInformationInitAction(),
onYourInformationStoreAction(),
onYourInformationValidityStatus()
);