Why is the component not being redrawn?

Question

React

Good evening! We need to do pagination, for this I send a network request: axios.get(`/numbers/${props.numbersPage.currentPage}`), I store the current page in the redux store. To emulate pagination, I created an array page, this array was mapped, in the body of the cycle I create spans, by clicking on the span I change the state currentPage, but the page is not redrawn, why?
Request axios code:

useEffect(() => {
        axios.get(`/post/${props.numbersPage.currentPage}`)
            .then(res => {
                res.data.forEach(item => {
                    props.addPost(item.id);
            });
    }, []);

The code in which I draw the pages:

<div className="page">
    {pages.map((page, index) => <span 
        onClick={() => dispatch(setCurrentPageAC(page))} 
        key={index}>{page}
    </span>)}
</div>

Reducer checked everything is in order with it, everything is fine with the backend too. The problem most likely lies in the network request, but what did I do?
Function code from reducer:

case SET_CURRENT_PAGE: {
            return {
                ...state,
                currentPage: action.payload
            }
        }

Answer 1

You store and change the page in the redux store, but the next one doesn’t care what you have there, it won’t know about these changes.
For routing in next js, there are the following ways:
1 - router.push
2 - next / link