Cursor pagination con Redux Toolkit

// store/paginationSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";



// thunk para traer resultados de la API usando cursor

export const fetchPage = createAsyncThunk(

  "pagination/fetchPage",

  async ({ cursor, sort }, thunkAPI) => {

    // Ejemplo de API con cursor y sort

    const response = await fetch(

      `/api/items?cursor=${cursor || ""}&sort=${sort}`

    );

    const data = await response.json();

    return data; 

    // Supongamos que data = { items: [...], nextCursor: "abc", previousCursor: "xyz" }

  }

);



const paginationSlice = createSlice({

  name: "pagination",

  initialState: {

    items: [],

    nextCursor: null,

    previousCursor: null,

    sort: "docdate:asc",

    loading: false,

    error: null,

  },

  reducers: {

    changeSorting: (state, action) => {

      state.sort = action.payload;

    },

  },

  extraReducers: (builder) => {

    builder

      .addCase(fetchPage.pending, (state) => {

        state.loading = true;

        state.error = null;

      })

      .addCase(fetchPage.fulfilled, (state, action) => {

        state.loading = false;

        state.items = action.payload.items;

        state.nextCursor = action.payload.nextCursor;

        state.previousCursor = action.payload.previousCursor;

      })

      .addCase(fetchPage.rejected, (state, action) => {

        state.loading = false;

        state.error = action.error.message;

      });

  },

});



export const { changeSorting } = paginationSlice.actions;

export default paginationSlice.reducer;

// store/index.js

import { configureStore } from "@reduxjs/toolkit";

import paginationReducer from "./paginationSlice";



export const store = configureStore({

  reducer: {

    pagination: paginationReducer,

  },

});

// main.jsx

import React from "react";

import ReactDOM from "react-dom/client";

import { Provider } from "react-redux";

import { store } from "./store";

import App from "./App";



ReactDOM.createRoot(document.getElementById("root")).render(

  <Provider store={store}>

    <App />

  </Provider>

);

// App.jsx

import React, { useEffect } from "react";

import { useSelector, useDispatch } from "react-redux";

import { fetchPage, changeSorting } from "./store/paginationSlice";



export default function App() {

  const { items, nextCursor, previousCursor, sort, loading, error } = useSelector(

    (state) => state.pagination

  );

  const dispatch = useDispatch();



  // Primera carga

  useEffect(() => {

    dispatch(fetchPage({ cursor: null, sort }));

  }, [dispatch, sort]);



  const handleNext = () => {

    if (nextCursor) dispatch(fetchPage({ cursor: nextCursor, sort }));

  };



  const handlePrevious = () => {

    if (previousCursor) dispatch(fetchPage({ cursor: previousCursor, sort }));

  };



  const handleSortChange = (e) => {

    dispatch(changeSorting(e.target.value));

    dispatch(fetchPage({ cursor: null, sort: e.target.value }));

  };



  return (

    <div>

      <h1>Resultados</h1>



      {loading && <p>Cargando...</p>}

      {error && <p>Error: {error}</p>}



      <select value={sort} onChange={handleSortChange}>

        <option value="docdate:asc">Fecha ↑</option>

        <option value="docdate:desc">Fecha ↓</option>

        <option value="slug:asc">Slug ↑</option>

        <option value="slug:desc">Slug ↓</option>

        <option value="score:asc">Score ↑</option>

        <option value="score:desc">Score ↓</option>

      </select>



      <ul>

        {items.map((item) => (

          <li key={item.id}>{item.title} — {item.date}</li>

        ))}

      </ul>



      <div>

        <button disabled={!previousCursor} onClick={handlePrevious}>

          ← Anterior

        </button>

        <button disabled={!nextCursor} onClick={handleNext}>

          Siguiente →

        </button>

      </div>

    </div>

  );

}