Implementing redux to store the pageIndex value

[karnamanirudh]

I have implemented redux to store the pageIndex state, when i click on the Next button the pageIndex value is set to 1 and i dispatch an action when the button is clicked

dispatch(tablePageIndex(pageIndex, tableName))

The pageIndex state value is set to 1 and the display of pageIndex is page 2 of 2.

When i filter the results in page 2 with three letters, the actual pageIndex value shows as page 2 of 1. so once i start filtering the pageIndex value is still the same, the results page should be page 1 of 1. I have attached some of the screenshot to show the workflow.

Code :

Dispatching action on click of next button :

const onClickNextPage = () => {
   nextPage();
   dispatch(tablePageIndex(pageIndex, uniqueTableName));
 };

Initial pageIndex state from redux :

initialState: { pageIndex: tableState[uniqueTableName].pageIndex }

On Click of next button

Filter on table

CodeSandbox link - https://codesandbox.io/s/relaxed-chebyshev-4r3up?file=/src/App.js

Thanks