In a react application where you choose redux as a pattern to manage the data, there comes situations where you want to list an array of data and show them in your component. For instance let’s say you have an array of todos to be shown in a list and you are getting the list from a rest API.
Step1. Fetch Data
You may use a proper library to do the async the right way, get the data and add it to a property so called todos of your reducer. Then all you need is to pass store and action to your component and have it available as this.props.getTodos() and this.props.todos . Well so far, everything looks nice. but what if you wanna paginate the todos?
Step2. Paginate Data
In order to paginate data properly, we assume that the rest API used to fetch the list of data will accept some kind of query parameter to indicate the page we are currently at. so lets assign the page to the getTodos() we already have.
Getting the first page:
Getting the nth page:
Step3. Resetting the data
Now what? what if we wanna reset the list, empty the list and re-fill it with new data?
The idea here is that instead of creating a new action called resetList we could use our current action, but new naming must be implemented to better extend the functionality. Let’s rename our action from getTodos to listTodos and for resetting purpose, just pass false to the function. So this.props.listTodos(false) will reset the list, but any positive non-zero integer will fetch the list of data in that integer corresponding page.
The whole idea is to make things more modular and instead of creating actions for every bit of our application, we could pass custom parameters to detect special situations and re-use our available actions to extend the functionality. Have Fun ;-)