React, Redux, problem z ponownym renderowaniem kodu

0

Witam wszystkich i na samym początku proszę o wyrozumiałość, dopiero zaczynam przygode z programowaniem.

Mam problem w swojej aplikacji z ponownym renderowaniem kodu a dokładniej z pobieraniem przez niego API. Podczas pierwszego zapytania wszystko działa jak należy problem pojawia sie w chwili wyboru konkretnej kategorii z menu po lewej stronie. Chciałbym aby strona wysyłała nowe zapytanie i wyświetlała odpowiednie wyniki z w liście z po prawej. Niestety tak sie nie dzieje i nie mam pojecia gdzie leży problem.

Przy okazji chiałbym prosić o konstruktywna krytyke mojego kodu. Każda wskazówka bedzie dla mnie cenna. Co moża było zrobić lepiej, albo czego na pewno nie powinno się absolutnie robić by w przyszlości pisac lepszej jakości kod.

Cały kod aplikacji w linku do GitHub:
https://github.com/oznerek/food-house

0

Niestety nie mam czasu na sprawdzenie kodu, ale obstawiam że przy zmianie kateogorii nie odpalasz akcji odpowiedzialnej za wysłanie requestu. Jeśli to natomiast robisz to zapewne nie emitujesz rezultatu tej akcji, przez co stan Redux się nie zmienia.

0
Aventus napisał(a):

Niestety nie mam czasu na sprawdzenie kodu, ale obstawiam że przy zmianie kateogorii nie odpalasz akcji odpowiedzialnej za wysłanie requestu. Jeśli to natomiast robisz to zapewne nie emitujesz rezultatu tej akcji, przez co stan Redux się nie zmienia.

Dzieki za odpowiedz.
Przeglądałem swój kod szukając tego o czym napisałeś, ale wygląda jakby wszystko było połaczone prawidłowo

0

Ok, jeśli nikt się nie odezwie dzisiaj to postaram się sprawdzić Twój kod wieczorem.

0

Byłbym bardzo wdzieczny, pozdrawiam

1

@oznerek: Przeglądnąłem sobie Twój kod i mam kilka spostrzeżeń:

  1. Lista menu (MenuList) i dań (DishList) są renderowane w pliku index folderu customers. W ogóle to jest Twój jedyny folder pod components, co sprawia wrażenie że jest to komponent właśnie dotyczący klientów. Wprowadza to w błąd i nijak ma się do tego co tak naprawdę wyświetlasz.
  2. Nie jestem zwolennikiem imperatywnego nazewnictwa akcji opisujących coś co de facto już się stało: FETCH_MENU- menu już zostało "sfetchowane", SELECT_MENU_ITEM- użytkownik już wybrał opcję z menu. Proponuję w tym przypadku stosować nazewnictwo w czasie przeszłym, czyli odpowiednio MENU_FETCHED, MENU_ITEM_SELECTED.
  3. API/config.js oraz import config from '../components/API/config'; Ten config jest bardzo mylący, z początku nie wiedziałem o co chodzi. No bo jak można wywoływać get na konfiguracji? Najlepiej żeby Twój plik actions/index.js nic nie wiedział o axios, i wszelkie operacje związane z requestami były wykonywane właśnie w pliku API/index.js (nie config.js!).
  4. Niektóre komponenty nie muszą dziedziczyć po React.Component jeśli nie podpinasz funkcji lifecycle. Np. MenuList

Przechodząc do meritum, zwróć uwagę że odpalając akcję selectMenu jedyne co robisz to zmieniasz obecnie wybraną opcję z menu. Nie ściągasz nowych przepisów dla wybranej kategorii. Przy zmianie kategorii musisz wykonać nowy request i odpalić nową akcję FETCH_MENU.

0

Przede wszystkim dzięki wielkie za poświęcony czas.

Co do Twoich spostrzeżeń to chciałbym się do nich troche odnieśc, bo w obecnej chwili nie wszystko jest tam może jasne.

  1. Aktualnie faktycznie jest tam jeden katalog, docelowo mają znaleźć się jeszcze 2/3 w zależności jak bardzo uda mi się rozbudować tą aplikacje.
    (MenuList i DishList) odnosza się w tym przypadku do strony klienta. Mam zamiar wprowadzić jeszcze dodatkowe katalogi (Kitchen i Employees) gdzie bede przetrzymywał bardzo podobnie nazwane pliki.
    Czy w tym wypadku pozostawienie takich nazw jest ok, czy lepiej bedzie pozmieniać je na np. (MenuListCustomers itp.)?

  2. W sumie bardzo podobne pytanie co wyżej czy w momencie rozbudowania sie aplikacji nazwy "fetchowania" też pozmieniać odpowiednio na np "CUSTOMER_SELECT_MENU_ITEM", "CUSTOMER_FETCH_MENU".

  3. Masz racje, z początku był tam nawet plik index.js, ale gdzieś podczas klepania kodu zaczalem go przerabiac i ostatecznie zostal calkiem usuniety a wszystko zostało w config.js. Jeśli dobrze zrozumiałem to API/index.js mam wykonać cały request do API, w actions/index.js tylko przekazac jego wynik tak?

  4. Juz popawione :)

Szczerze powiedziawszy to nie do końca rozumiem. Mam stworzyć całkiem nową akcje aby to wykonała, czy przerobić istniejącą selectMenu tak aby to ona wywoływała nowe zapytanie. I tu rodzi mi sie też drugie pytanie czemu to wszystko działa prawidłowo za pierwszym razem, a później wszystko klęka?

0

(MenuList i DishList) odnosza się w tym przypadku do strony klienta. Mam zamiar wprowadzić jeszcze dodatkowe katalogi (Kitchen i Employees) gdzie bede przetrzymywał bardzo podobnie nazwane pliki.
Czy w tym wypadku pozostawienie takich nazw jest ok, czy lepiej bedzie pozmieniać je na np. (MenuListCustomers itp.)?

Moim zdaniem to nie za bardzo pasuje. Koniec koncow menu nijak ma sie do klientow, zgodzisz sie? Ja bym po prostu umiescil to w oddzielnym folderze menu. Customers brzmi bardziej jak cos od komponentow dotyczacych klienta: profil, historia zamowien itp.

  1. W sumie bardzo podobne pytanie co wyżej czy w momencie rozbudowania sie aplikacji nazwy "fetchowania" też pozmieniać odpowiednio na np "CUSTOMER_SELECT_MENU_ITEM", "CUSTOMER_FETCH_MENU".

Pomijajac to co napisalem wyzej, moim zdaniem nie ma takiej potrzeby. Jeszcze raz chce zaznaczyc jednak ze to powinno byc w czasie przeszlym.

  1. Masz racje, z początku był tam nawet plik index.js, ale gdzieś podczas klepania kodu zaczalem go przerabiac i ostatecznie zostal calkiem usuniety a wszystko zostało w config.js. Jeśli dobrze zrozumiałem to API/index.js mam wykonać cały request do API, w actions/index.js tylko przekazac jego wynik tak?

Tak, Twoje wywolanie tego api w akcji powinno wygladac mniej wiecej tak: await api.getMenu(category). Zwroc uwage na przekazanie kategorii jako parametr. Sam obiekt requestu powinien byc zbudowany w API.

Szczerze powiedziawszy to nie do końca rozumiem. Mam stworzyć całkiem nową akcje aby to wykonała, czy przerobić istniejącą selectMenu tak aby to ona wywoływała nowe zapytanie. I tu rodzi mi sie też drugie pytanie czemu to wszystko działa prawidłowo za pierwszym razem, a później wszystko klęka?

Dziala za pierwszym razem poniewaz wywolujesz tamta akcje na starcie w funckcji componentDidMount ktora jest wywolywana tylko raz. Pozniej przy zmianie opcji w menu zmieniasz tylko stan, nic wiecej. Mozesz podpiac np. componentDidUpdate i sprawdzic poprzednie props z nowymi. Jesli kategoria sie zmienila to wywolaj nowy fetch, jesli nie to nie rob nic. Swoja droga zastanowil bym sie nad przechowaniem listy menu w stanie, tak aby nie musiec fetchowac po raz kolejny kategorii ktora juz wczesniej zostala sfetchowana,

1

Dziala za pierwszym razem poniewaz wywolujesz tamta akcje na starcie w funckcji componentDidMount ktora jest wywolywana tylko raz. Pozniej przy zmianie opcji w menu zmieniasz tylko stan, nic wiecej. Mozesz podpiac np. componentDidUpdate i sprawdzic poprzednie props z nowymi. Jesli kategoria sie zmienila to wywolaj nowy fetch, jesli nie to nie rob nic. Swoja droga zastanowil bym sie nad przechowaniem listy menu w stanie, tak aby nie musiec fetchowac po raz kolejny kategorii ktora juz wczesniej zostala sfetchowana,

Ok, teraz jest to dla mnie już dużo bardziej zrozumiałe. Zaraz zaczne działać w tym kierunku, jak uda mi się uporać z tym problemem przerobię reszte kodu według wskazówek. Jeszcze raz wielkie dzieki za pomoc ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1