reactjs, redux und pagination

Question

Ich habe einen API-Endpunkt, der eine Reihe von Zutaten gibt. Jede Zutat hat die folgenden Eigenschaften: ID, Name, Messeinheit, Dichte (kg/lt), Kosten/Messeinheit. Ich habe einige tausend Zutaten und kann weiter wachsen.

Ich erhalte eine paginierte API mit variabler Seitengröße von meinem Backend-Server.

http://yoursite.com/api/ingredients?page=1&page_size=200 

Auf Client-Seite, wie mein Zustand Form w.r.t zu page und page_size und ingredients zu organisieren.

Auf Clientseite möchte ich nur 15-20 Elemente pro Seite anzeigen. So stellen Sie sicher, dass die Artikel ordnungsgemäß mit Paginierung angezeigt werden.

Ähnlich habe ich einige mehr wie Zutaten. ZB: Rezepte, Benutzer und mehr.

Wird Redux in der Lage, so große Datenmengen zu verarbeiten.

Answer 1

Ihre Zutaten Antwort so sein könnte:

GET http://yoursite.com/api/ingredients?page=1&page_size=15 

{ 
    pages_count: 50, 
    page: 1, 
    ingredients: [ 
     //first 15 ingredients 
    ] 
} 

Ihre Erstanwendung Zustand wäre:

{ 
    pages_count: 50, 
    page: 1, 
    page_size: 15, 
    ingredients: [ 
     //first 15 ingredients 
    ] 
} 

Wenn Benutzer Page 2 Schaltfläche klicken (oder Next Page, oder was auch immer), versenden Sie einen Asynchron Aktion wie folgt:

const changePage = (page) => (dispatch) => { 
    doGet(`http://yoursite.com/api/ingredients?page=${page}&page_size=15`) 
     .then(res => { 
      dispatch(retrieveIngredients(res.ingredients, page)); 
     }); 
} 

wo retrieveIngredients ist ein Action-Schöpfer:

const retrieveIngredients = (ingredients, page) => { 
    return { 
     type: 'retrieve_ingredients', 
     ingredients, 
     page 
    }; 
} 

Dann wird das Minderer, die retrieve_ingredients Aktion aktualisiert seinen Zustand Griffe:

{ 
    page: action.page, 
    ingredients: action.ingredients 
} 

In Ihrem IngredientsList Komponente (oder etwas ähnliches, ich denke), werden Sie nur zeigen die Liste state.ingredients. Außerdem zeigt Ihr PageSelector von 1 bis state.pages_count Seitentasten.