Search code examples
angularngrxngrx-effects

NgRx Effects throws a type error and i do not know what happend


i tried to create a const to put all actions but when i implemented it i got his error:

Argument of type 'OperatorFunction<Action, Action>' is not assignable to parameter of type 'OperatorFunction<Action, { pageSize: number; pageIndex: number; }>'. Type 'Action' is missing the following properties from type '{ pageSize: number; pageIndex: number; }': pageSize, pageIndex

before (works fine):

paginateStudents$ = createEffect(()=>this.actions$.pipe(
        ofType('[Student List] Paginate students'),
        mergeMap((action: {pageSize: number; pageIndex: number})=> this.studentService.getAll(action.pageSize,action.pageIndex)
        .pipe(
            map((students: StudentResponse) => ({type: ACTIONS.PAGINATE_STUDENTS_SUCCESS, payload:{
                studentList: students.data,
                pageSize: students.pageSize
            }})),
            catchError(()=> EMPTY)
        ))
    ));

after (doesn't work):

paginateStudents$ = createEffect(()=>this.actions$.pipe(
        ofType(ACTIONS.PAGINATE_STUDENTS),
        mergeMap((action: {pageSize: number; pageIndex: number})=> this.studentService.getAll(action.pageSize,action.pageIndex)
        .pipe(
            map((students: StudentResponse) => ({type: ACTIONS.PAGINATE_STUDENTS_SUCCESS, payload:{
                studentList: students.data,
                pageSize: students.pageSize
            }})),
            catchError(()=> EMPTY)
        ))
    ));

const action-list:

export const ACTIONS = {
    ...
    PAGINATE_STUDENTS: '[Student List] Paginate students',
    ...
}

student.action:

export const paginatedStudents = createAction(
    ACTIONS.PAGINATE_STUDENTS_SUCCESS,
    props<{
        payload: {
            studentList: readonly Student[];
            pageSize: number
        }
    }>()
);

Solution

  • Use the action instead of the action's type:

    paginateStudents$ = createEffect(()=>this.actions$.pipe(
            ofType(paginatedStudents ),
            mergeMap((action: {pageSize: number; pageIndex: number})=> this.studentService.getAll(action.pageSize,action.pageIndex)
            .pipe(
                map((students: StudentResponse) => ({type: ACTIONS.PAGINATE_STUDENTS_SUCCESS, payload:{
                    studentList: students.data,
                    pageSize: students.pageSize
                }})),
                catchError(()=> EMPTY)
            ))
        ));