Estoy haciendo una película y quiero agregar paginación en el componente MoviesFromGenre. Inicialmente, MoviesFromGenre se procesa en función de la identificación de GenresList. Quiero agregar paginación pero no sé cómo actualizar el estado en useReducer cuando hago clic en los botones siguiente/anterior.

 import React, { useEffect, useReducer, useState } from 'react'; import { useParams } from 'react-router-dom' import axios from 'axios'; import { API_URL, API_KEY } from '../api/config.js'; import Movies from './Movies' const initialState = { loading: true, error: '', movies: [] }; const reducer = (state, action ) => { switch(action.type) { case 'FETCH_SUCCESS': return { loading: false, movies: action.payload, error: '', }; case 'FETCH_ERROR': return { loading: false, movies: [], error: 'Error' }; default: return state; } }; function MoviesFromGenre () { const [state, dispatch] = useReducer(reducer, initialState); const { id } = useParams(); const [pageNumber, setPageNumber] = useState(1) useEffect(() => { axios .get( `${API_URL}discover/movie?api_key=${API_KEY}&language=en-US&with_genres=${id}` ) .then(response => { dispatch({ type: 'FETCH_SUCCESS', payload: response.data }) }) .catch(err => { dispatch({ type: 'FETCH_ERROR' }) }) }, []) const nextPage = () => { axios .get( `${API_URL}discover/movie?api_key=${API_KEY}&language=en-US&with_genres=${id}&page=${pageNumber}` ) .then(response => { console.log(response.data) }) setPageNumber(pageNumber+1) } const prevPage = () => { axios .get( `${API_URL}discover/movie?api_key=${API_KEY}&language=en-US&with_genres=${id}&page=${pageNumber}` ) .then(response => { console.log(response.data) }) setPageNumber(pageNumber-1) } return ( <div> <Movies state={state}/> <button onClick={prevPage}>Prev</button> <button onClick={nextPage}>Next</button> </div> ) } export default MoviesFromGenre;

Creé un repositorio en GitHub.

Quiero actualizar el estado de las películas cuando hago clic en los botones siguiente o anterior.