title: React Redux Pagination
body: <p>In the Case One:
  Im doing a simple server-side pagination in rails and using react as front-end and redux as my state management. I have done all the things and the last thing remaining is to just pass the new generated url and fetch the new data. This data will be fetched in a another component which will generate and products.
  as Im using redux in my case, how am I able to pass this data to my data fetch action ?</p>
  <p>In the Case Two:
  I have tried passing a parameter named url and dispatching the fetch action again with the url data i give to it. but the return is that the dispatch is not a function. Am I even able to rerun actions in action.jsx ?</p>
  <pre><code>action.jsx
      
      export const handlePage = (e, { activePage }) =&gt; {
          let pageNum = activePage
          let pageString = pageNum.toString();
          let url = &quot;/api/v1/products/index/?page=&quot; + pageString; ------&gt; Use This ...
      }
      
  
  export const fetchProducts = (url) =&gt; { ------&gt; In Here
          return (dispatch) =&gt; {
              console.log(url);
              dispatch(fetchProductsRequest());
              axios
                .get(url) 
                .then((response) =&gt; {
                  // response.data is the products
                  const products = response.data.products;
                  dispatch(fetchProductsSuccess(products));
                })
                .catch((error) =&gt; {
                  // error.message is the error message
                  dispatch(fetchProductsFailure(error.message));
                });
          };
      };
  
      export class Paginator extends React.Component {
        state = {
          page: [],
          pages: [],
        };
      
      
        componentDidMount() {
          axios
            .get(&quot;/api/v1/products/index&quot;, { withCredentials: true })
            .then((response) =&gt; {
              this.setState({
                page: response.data.page,
                pages: response.data.pages,
              });
            })
            .catch((error) =&gt; {
              console.log(&quot;Check Login Error&quot;, error);
            });
        }
      
        render() {
          return (
            &lt;div&gt;
              &lt;Pagination count={this.state.pages} page={this.state.page} onChange={handlePage} /&gt;
            &lt;/div&gt;
          );
        }
      }
  </code></pre>
  <p>Product.jsx</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import &quot;../../style/frequentlyasked.scss&quot;;
  import ItemOne from &quot;../../files/Item-One.png&quot;;
  
  // Redux
  import { connect } from &quot;react-redux&quot;;
  import { loadCurrentItem, addToCart, fetchProducts } from &quot;./action&quot;;
  
  const Product = ({
    mapProducts,
    fetchProducts,
    product,
    addToCart,
    loadCurrentItem,
  }) =&gt; {
    useEffect(() =&gt; {
      fetchProducts();  -----&gt; Using it Here !
    }, []);
  
    return (
      &lt;div className=&quot;card-deck d-flex justify-content-center&quot;&gt;
        {mapProducts.map((product) =&gt; (
          &lt;div className=&quot;card item-card&quot; key={product.id} product={product}&gt;
            {/* Admin Card */}
            {/* Header Image */}
            &lt;img className=&quot;card-img-top&quot; src={ItemOne} alt=&quot;Card image cap&quot; /&gt;
            {/* Card Body */}
            &lt;div className=&quot;card-body&quot;&gt;
              &lt;h4 className=&quot;card-title&quot;&gt;{product.title}&lt;/h4&gt;
              &lt;h5 className=&quot;card-title&quot;&gt;$ {product.price}&lt;/h5&gt;
              &lt;p className=&quot;card-text&quot;&gt;{product.description}&lt;/p&gt;
              &lt;button
                className=&quot;btn btn-primary&quot;
                onClick={() =&gt; addToCart(product.id)}
              &gt;
                + Add To Cart
              &lt;/button&gt;
              &lt;a href=&quot;#&quot; className=&quot;btn btn-danger&quot;&gt;
                &lt;svg
                  width=&quot;1em&quot;
                  height=&quot;1em&quot;
                  viewBox=&quot;0 0 16 16&quot;
                  className=&quot;bi bi-heart-fill&quot;
                  fill=&quot;currentColor&quot;
                  xmlns=&quot;http://www.w3.org/2000/svg&quot;
                &gt;
                  &lt;path
                    fillRule=&quot;evenodd&quot;
                    d=&quot;M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z&quot;
                  /&gt;
                &lt;/svg&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            {/* Card Footer */}
            &lt;div className=&quot;card-footer&quot;&gt;
              &lt;small className=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    );
  };
  
  const mapStateToProps = (state) =&gt; {
    return {
      mapProducts: state.shop.products,
    };
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      addToCart: (id) =&gt; dispatch(addToCart(id)),
      loadCurrentItem: (item) =&gt; dispatch(loadCurrentItem(item)),
      fetchProducts: () =&gt; dispatch(fetchProducts()),
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Product);
  </code></pre>