Paging implementation | Ackee frontend cookbook

This is guide of building very easy but powerful paging in your React application app.

Prerequisites

You need to use Redux and React router (connected router of course) in your app

There is only one paging on the webpage. If you need more paging on the webpage then you will have to implement it by yourself, but you can still find some parts of the code below useful.

Installed our @ackee/chris package because we will need its routeDependencies HOC

Paging module sources

Start with config that defines default values that are used when parameters for paging miss at URL or have invalid values:

Then create selector that parse URL and get paging parameters from it or use the default values if they have invalid values:

Create a component to display content paging. It receives current page, limit (count of records on one page), totalCount of records and change page handler function.All props are provided by Pagination container (described in next step), except totalCount which has to supplied from Pagination parent component:

Create container that use the selector to get paging parameteres from React router's state and pass them to the Pagination component. Container is also enhanced with withRouter which means that router objects like history, location, etc. are supplied to props. Both mentioned props are used to in change page handler to set new page into URL's query string:

All that your paging module needs to export is just selector and Pagination container:

That's all! No saga or reducer needed, just selector and connected component..

Usage

Now let's wire it up!

Take the Pagination from module and supply records total count to it:

Component

Container

Leverage the routeDependencies (mentioned in prerequisites) enhancer for requesting users. Since the enhancer implementation does refetch every time any part (including query string) of url change, it's ensured that when you change the page, new users list is loaded:

Params selector

It's also good (but not necessary) to create a selector that select paging parameters and transform them to the form that is required for our API call:

Note: Names of API paging parameters (offset and limit in our example) may differ across projects so feel free to adjust them as your API requires.

Saga

And finally in the saga (if you use redux-saga) or elsewhere, use the selector from above to get params for API call:

Conclusion

Here we are, that's all you need to quickly implement pagination by using Redux, React router and routeDependencies enhancer. Remember that implementation is slightly simplified for purpose of this recipe so if you feel it could be programmed better, don't hesitate and adjust it as you need.

Extending with search

The paging solution is easy extendable, eg. if you also need fulltext search for the list, you only have to make few changes:

Create your UsersSearch component, notice how it is similar to Pagination container. If search input is empty set the value to undefined which causes it's removed from the query string as it's useless there:

Note 1: Normally container and view component should been divided into two files, but for our example, we keep them together.

Note 2: In real application the input onChange handler should been debounced to prevent api call on every character user type.

Add new selector for getting search expression from url query string, and modify queryStringParamsSelector to return also this expression:

Note: Same as for offfset and limit (mentioned earlier) the q is the query parameter name of our API. Be sure your API uses the same names otherwise change it to make it works.

And that's all, you got an extra searching feature almost for free 🎉