Pagination in React-Redux

Question

So I'm just trying to make a pagination component in react. Im currently using redux for my state management and using semantic-ui for the pagination component. I have currently made a react component in my action.jsx file and have two other functions which one of them is for data fetching for my redux state and one other for the declaring the current active page value and set the new target url for data fetching.

    export class Paginator extends React.Component {


        state = {
            page: [],
            pages: []
          }
          
         handlePage(activePage) {
          let pagenum = activePage;
          let pagestring = pagenum.toString();
          paginationUrl = '/api/v1/products/index/?page=' + pagestring; ----> Pass This Url
        }


        componentDidMount() {
            axios.get("/api/v1/products/index", { withCredentials: true })
              .then(response => {
                  this.setState({
                    page: response.data.page,
                    pages: response.data.pages
                  })
              })
              .catch(error => {
                console.log("Check Login Error", error);
              });
        }

        render() {
            return(
                <Pagination onPageChange={this.handlePage} size='mini' siblingRange="6"
                defaultActivePage={this.state.page}
                totalPages={this.state.pages}
                />
            )
        }
    }


   export function fetchProducts() {
    return (dispatch) => {
        dispatch(fetchProductsRequest())
        axios
        .get("To Here !")
        .then(response => {
            // response.data is the products
            const products = response.data.products
            dispatch(fetchProductsSuccess(products))

        })
        .catch(error => {
            // error.message is the error message
            dispatch(fetchProductsFailure(error.message))
        })
    }
    }

The question is how am i able to pass the paginationUrl to the function below ? (Actually, there is no way i guess !).

Note: I am only able to use handlePage in the same component with the pagination component.

Waiting for suggestions, Thx in advance ;)

Answer 1

You could pass the URL to the fetchProducts function when dispatching actions on page changes.

handlePage(activePage) {
  const url = `/api/v1/products/index/?page=${activePage}`
  dispatch(fetchProducts(url))
}

And update the fetchProducts action creator to use the URL.

export function fetchProducts(url) {
  return (dispatch) => {
    dispatch(fetchProductsRequest())
    axios
      .get(url)
      .then((response) => {
        dispatch(fetchProductsSuccess(response.data.products))
      })
      .catch((error) => {
        dispatch(fetchProductsFailure(error.message))
      })
  }
}

---

This is unrelated to the question but I would strongly recommend using React Query to simplify data fetching and synchronization.