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

Arun Kumar Mohan · Accepted Answer · 2021-03-17 02:25:14Z

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.

I would only add to this, that fetchProducts should be reused in the componentDidMount call. I would also advice to extract that function to a different file.

Collectives™ on Stack Overflow

Pagination in React-Redux

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related