Así que tengo una tabla que actualmente estoy cargando de forma diferida y quiero almacenar en caché los datos de las 5 páginas más actuales. Cuando un usuario hace clic en el botón de avance o retroceso, enviaré el número de página al que se dirige y la dirección en la que se dirige ( anterior o siguiente ).

En mi función getData, verificaré si la página a la que van existe en una matriz de datos en caché o no. En caso afirmativo, enviaré esos datos sin hacer una llamada a la API. Si no, veré la dirección a la que van. Por ejemplo, si van 1 -> 5, luego la página 6, eliminaré la página 1 de la matriz cachedData , luego insertaré la página 6, y si van hacia atrás 6 -> 1, eliminaré la página 6, porque es la más alejada de la página actual, y empuje la página 1 en su lugar. A continuación se muestran las implementaciones:

 const cachedData = []; async function getData({ payload }) { const { pageNumber, ...currentPageInfo } = payload; const cachedPage = cachedData.find(page => page.pageNumber === pageNumber); if (!cachedPage) { const response = await fetchData(currentPageInfo); if (response) { if (cachedData.length >= 5) { if (currentPageInfo.direction === "next") cachedData.shift(); cachedData.pop(); } const { pageInfo, dataList } = response.data; cachedData.push({ dataList, pageNumber, pageInfo, }); cachedData.sort((x, y) => x.pageNumber - y.pageNumber); dispatch(getDataSuccess({ res: dataList, pageInfo })); } } else { dispatch( getDataSuccess({ res: cachedPage.dataList, pageInfo: cachedPage.pageInfo, }) ); } }

Actualmente está funcionando, pero no estoy seguro de estar en el camino correcto. Entre cambiar, clasificar y encontrar, el rendimiento no es muy bueno. La lógica es extraña porque estamos usando nuestra propia forma de paginación, y no el enfoque habitual de saltar y tomar . Pero lo importante es si se puede mejorar algo en este código. Muchísimas gracias.