Hej, w mojej aplikacji uzywam pagination zeby wyswietlic liste produktow. Przy kazdym produkcie jest ikonka serca ktora umoziwia dodanie elementu do listy ulubionych (i jest czerwona kiedy jakakolwiek lista zawiera ten produkt). W chwili obecnej pobieram 10 produktow na strone oraz kazda produkt juz zawiera od razu informacje do jakiej listy nalezy dany produkt. Problem pojawia sie w momencie w ktorym chce dodac produkt do listy (lub usunac). Czyli klikam serce, wybieram liste, klikam "dodaj" i w bazie faktycznie dodaje produkt do listy, ale rzecz jasna w UI nie ma zmiany bo nie robie refetch bo wtedy cala strone musialbym od nowa pobrac z bazy (w sensie te 10 produktow). Jak to poprawnie rozwiazac? Na ten moment planuje osobno pobrac produkty do pagination i osobno pobierac liste do ktorej kazde z produktow nalezy i wtedy przy dodawaniu/usuwaniu produktow robilbym refetch ale tylko wlasnie dla tego produktu. Problem jest taki ze wtedy najpierw musialbym poczekac az pobiora sie produky i pozniej dopiero pociagnac listy. Czy to co palnuje jest ok?
A po co chcesz pobierać te 10 produktów skoro wiesz jaka zaszła zmiana? Po prostu zmień serduszko na czerwone i wyślij jednocześnie żądanie na serwer. Perfekcyjnie by było użyć optimistic update https://react.dev/reference/react/useOptimistic i cofnąć zmianę na UI kiedy serwer rzuci fochem
Myślę, że całą logikę schrzaniłeś. Wszystko powinno być wykonywane w aplikacji, a odświeżanie powinno wykonywać się automatycznie, na aktualnej zawartości. Potrzebujesz to oddzielić np. używać konsoli do operowania na aplikacji i na koniec dodać funkcję "wyswietl()". Konsola (dla przykładu) - znaczy tryb nie graficzny, bo on jest zbędny, daje ten przykład, żebyś zrozumiał że wyświetlanie nie jest konieczne, a Ty to połączyłeś, zagmatwując obraz. Nic innego nie ma sensu jak dla mnie. Wyswietlanie może mieć parametry, określające którą rzecz odświeżyć.
Ujmę to jeszcze inaczej. Na normalnej stronie żeby obsłużyć działania tworzysz funkcje dodajElement(jakia); usunElement(jaki); posortuj(jak); i potem ich używasz, ale jak napiszesz skrypt automatyzujący dodajElement(1); dodajElement(13);dodajElement(5);dodajElement(6);usunElement(6); to to zostanie wykonane bez trybu graficznego. Bo on jest zbędny. A Ty to najwyraźniej połączyłeś zagmatwując.
Programowanie - organizacja części logicznych wykonujących powierzone zadania współpracujących ze sobą.
obscurity napisał(a):
A po co chcesz pobierać te 10 produktów skoro wiesz jaka zaszła zmiana? Po prostu zmień serduszko na czerwone i wyślij jednocześnie żądanie na serwer. Perfekcyjnie by było użyć optimistic update https://react.dev/reference/react/useOptimistic i cofnąć zmianę na UI kiedy serwer rzuci fochem
Chcialbym zrobic cos w stylu tego co jest na fiverze gdzie mozna jeden produkt dodac do wielu list, pojawiaja sie popupy ze dodano/usunieto itp. Sugerujesz zebym mial osobny state ktory dla kazdego produktu przechowywalby do ktorych list nalezy dany produkt i w momencie w ktorym dodaje cos do listy lub usuwam updateujac baze danych, nie pobieral od nowa tych list dla produktow tylko uaktualil ten state zeby zmatchowac zmiany?
Tuptuś Tupta napisał(a):
Jak to poprawnie rozwiazac?
Po prostu oznacz w widoku ten element ikonką i tyle. Nie musisz nic pobierać od nowa, bo przecież znasz stan - właśnie go dodałeś do listy, więc jest dodany do listy.