Redux paginacja

Witam, mam api, które zwraca mi coś w tym stylu:

{
   content: [{...}, {...},...,{...}],
   pageNumber: 0,
   pageSize: 10,
   totalElements: 300,
   first: true,
   last: false,
   totalPages: 30
}

Dopiero zaczynam zabawę z reduxem i nie bardzo wiem jak to mogę zapisać.
Wcześniej miałem po prostu listę obiektów (bez paginacji), więc wrzucałem to do jednego obiektu i zapisywałem to w jego polach mapując id:

products: {
   55c: {id: 55c, name: telefon}, 
   123a: {id: 123a, name: monitor}
 } 

A jeśli chciałem dostać się do konkretnego produktu to w reduktorze miałem tak:

 return {...state, [action.payload.data.id]: action.payload.data};

i wszystko fajnie działało.

Po kolei ;)

Paginacja i to, w jaki sposób pobierasz dane nie ma nic wspólnego z Reduxem. Redux wprowadza ci określony sposób zarządzania stanem twojej aplikacji, niezależnie od tego czy ma ona paginację, czy nie. W reduxowym storze wciąż możesz mieć obiekt reprezentujący listę "czegoś" - u ciebie produktów, jednak cała różnica polega na tym, że tą listą nie manipulujesz bezpośrednio, a poprzez dispatchowanie kolejnych akcji które niosą określoną zawartość. Zawartość ta przechodzi przez reducery które zwracają nowy stan twojej aplikacji, wzbogacony np. o kolejną porcję danych.

Po krótkim wstępie opisz proszę jaki masz problem i z którą częścią tego procesu nie możesz sobie poradzić - spróbujemy pomóc ;)

Dzięki za odpowiedź :D

No więc mam taki problem, że przykładowo mam stan aplikacji i mam w niej między innymi objekt PageProducts, do którego zapiszę taką odpowiedź z api

{
   content: [{...}, {...},...,{...}],
   pageNumber: 0,
   pageSize: 10,
   totalElements: 300,
   first: true,
   last: false,
   totalPages: 30
}

To jeżeli przejdę na następną stronę (i pobiorę następną porcję danych) to powinienem nadpisać ten obiekt(PageProducts), tak ?

I jeszcze pytanie, jeżeli zmodyfikuję obiekt w stanie aplikacji, to zostanie wygenerowany nowy stan, więc pozostałe obiekty muszę przepisać do nowego stanu tak ?

Po pierwsze, jedyne co nazwałbym stanem aplikacji to content oraz może totalElements / totalPages. Reszta to bardziej metadane które mają ci powiedzieć, czy jeszcze pobierać, czy masz już wszystko, albo czy istnieją strony przed/po.

Jeśli chcesz, żeby twoja aplikacja trzymała wszystkie produkty, to po prostu z każdą porcją danych aktualizujesz tę tablicę "PageProducts" o nowe produkty. Nie wiem do końca jak do się ma do sensu paginacji - masz SPA i chcesz cache'ować obiekty które pobrałeś na poprzednich stronach? Co, jeśli ktoś doda nowy produkt? Twój cache po stronie klienta nie ma w takim momencie sensu jeśli to dane dynamiczne.

I jeszcze pytanie, jeżeli zmodyfikuję obiekt w stanie aplikacji, to zostanie wygenerowany nowy stan, więc pozostałe obiekty muszę przepisać do nowego stanu tak ?

To nie jest tak, że nowy stan powstaje po modyfikacji aktualnego jako np. "side-effect". Ty w reducerze tworzysz nowy stan jawnie, biorąc aktualny, oraz akcję która właśnie została wykonana. Można powiedzieć, że z każdą akcją komponujesz aktualny stan mając w ręce stan poprzedni oraz akcję.

https://redux.js.org/basics/reducers#handling-actions

Dzięki wielkie :D
W ogólnie nie ogarnąłem moim ciemnym umysłem, że odpowiedź mogę sobie rozbić na kilka obiektów :D Teraz powinienem dać radę to zrobić bez większego problemu :D