react saga - Filter data based on query's body

In my backend, I use the post request type to fetch the data, so I can send a query or any other information I want in the body, so that the data is fetched on its basis

On the front end, I use React with Saga, and I can fetch data from the server without any problem

The case in which I need help is as follows.

I have a table containing products in the database and I want to divide these products into three pages based on a field in the table

Of course, I was able to do the filtering process in Saga as follows, and there is no problem

How can I pass this query in the image variable according to my need?

Suppose I want to create three pages in React, and for each page I will send a different filter, how do I do that?

I will attach the full code that I tried to do

Waiting for your help

this action

import {
    GET_SERVICES_SUPPORT_LIST,
    API_RESPONSE_SUCCESS,
    API_RESPONSE_ERROR,
 
} from "./actionType";

// common success
export const ServicesSupportApiResponseSuccess = (actionType, data) => ({
    type: API_RESPONSE_SUCCESS,
    payload: { actionType, data },
});
// common error
export const ServicesSupportApiResponseError = (actionType, error) => ({
    type: API_RESPONSE_ERROR,
    payload: { actionType, error },
});

export const getServicesSupportList = services => ({
    type: GET_SERVICES_SUPPORT_LIST,
    payload: services,

});

this action type

// Actions
export const API_RESPONSE_SUCCESS = "API_RESPONSE_SUCCESS";
export const API_RESPONSE_ERROR = "API_RESPONSE_ERROR";
export const GET_SERVICES_SUPPORT_LIST = "GET_SERVICES_SUPPORT_LIST";

this saga

import { call, put, takeEvery, all, fork } from "redux-saga/effects";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import {
    GET_SERVICES_SUPPORT_LIST,

} from "./actionType";
import {
    ServicesSupportApiResponseSuccess,
    ServicesSupportApiResponseError

} from "./action";

//Include Both Helper File with needed methods
import {
    getServicesSupportList as getServicesSupportApi

}
    from "../../helpers/backend_helper";

function* getServicesSupport({ payload: services }) {
    try {
       const response  = yield call(getServicesSupportApi, services);
        yield put(ServicesSupportApiResponseSuccess(GET_SERVICES_SUPPORT_LIST, response.data));
    } catch (error) {
        yield put(ServicesSupportApiResponseError(GET_SERVICES_SUPPORT_LIST, error));
    }
}

export function* watchGetServicesSupportList() {
    yield takeEvery(GET_SERVICES_SUPPORT_LIST, getServicesSupport);
}
function* servicesSupportSaga() {
    yield all(
        [
            fork(watchGetServicesSupportList),
        ]
    );
}

export default servicesSupportSaga;

this hook

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux'
import { getServicesSupportList} from "../../../store/actions";
const AllServicesSupportHook = () => {
    const dispatch = useDispatch();

    //to get state from redux
    const { servicesSupportList, loder,error} = useSelector((state) => ({
        servicesSupportList: state.ServicesSupport.servicesSupportList,
        loder: state.ServicesSupport.loder,
        error: state.ServicesSupport.error,
        
    }));
    //when first load
    useEffect(() => {
        if (loder) {
           dispatch(getServicesSupportList());
         }
       }, [dispatch]);
       
       let test ;
       try {
           if (servicesSupportList.paginator)
           test = {query: {categoryTickets : 2} //This is definitely wrong
       } catch (e) { }
       const getPage = (services) => {
        dispatch(getServicesSupportList(services));
    }
    return [servicesSupportList, loder,error,getPage]
};

export default AllServicesSupportHook;

get list

export const getServicesSupportList = (services) => api.create(url.GET_SERVICES_SUPPORT_LIST,services);

this reducer

import {
    GET_SERVICES_SUPPORT_LIST,
    API_RESPONSE_SUCCESS,
    API_RESPONSE_ERROR,
} from "./actionType";

const INIT_STATE = {
    servicesSupportList: [],
    loder: true
};

const ServicesSupport = (state = INIT_STATE, action) => {
    switch (action.type) {
        case API_RESPONSE_SUCCESS:
            switch (action.payload.actionType) {

                case GET_SERVICES_SUPPORT_LIST:
                    return {
                        ...state,
                        servicesSupportList: action.payload.data,
                        loder: false,
                       
                    };

                default:
                    return { ...state };
            }

        case API_RESPONSE_ERROR:
            switch (action.payload.actionType) {
                case GET_SERVICES_SUPPORT_LIST:
                    return {
                        ...state,
                        error: action.payload.error,
                        loder: true,
                      
                    };

                default:
                    return { ...state };
            }

        case GET_SERVICES_SUPPORT_LIST: {
            return {
                ...state,
                loder: false,
            };
        }



        default:
            return { ...state };
    }
};

export default ServicesSupport;

this components

import React from "react";
import { Row, Container ,Alert} from "reactstrap";
import ServicesSupportListItems from "./ServicesSupportListCard";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Loader from "../../Common/Loader";

const ServicesSupportList = ({ data, loder, error }) => {
  return (
    <Container fluid={true}>
      <Row>
        {loder === false ? (
          data.data ? (
            data.data.map((item, index) => {
              return (
                <ServicesSupportListItems
                  key={index}
                  id={item.id}
                  categoryTickets={item.categoryTickets}
                  title={item.titleProduct}
                  description={item.description}
                  point={item.point}
                />
              );
            })
          ) : (<Alert color="danger"> {error} </Alert>)
        ) : ( <Loader error={error} />
         
        )}
        <ToastContainer closeButton={false} />
      </Row>
    </Container>
  );
};

export default ServicesSupportList;

Solution

I found the solution, thank you

function* getServicesSupport({ payload: services }) {

try {
    var response;
    if (services === "Support") {
       response  = yield call(getServicesSupportApi,{query: {categoryTickets : 2}});
    }
    if (services === "CardFree") {
        response  = yield call(getServicesSupportApi,{query: {categoryTickets : 6}});
    }
    yield put(ServicesSupportApiResponseSuccess(GET_SERVICES_SUPPORT_LIST, response.data));
} catch (error) {
    yield put(ServicesSupportApiResponseError(GET_SERVICES_SUPPORT_LIST, error));
}

}