Separate on() function outside of createReducer() function in 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'.

chumtoadafuq chumtoadafuq · Accepted Answer · 2020-02-03T11:19:34

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()
);

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

1 Answers