Obiekt stanów w komponencie funkcyjnym, podobnie jak w klasowym [React, JS]

Question

Cześć, mam złożony komponent (tabela, z szeregiem bajerów), który ma mnóstwo stanów i referencji (useState, useRef), i komponenty w nim również i myślę, jak sobie uprościć zadanie z zapisywaniem wszystkich stanów do profilu (redux, a potem backend). Przez profil mam na myśli po załadowaniu strony przywrócenie poprzedniego stanu całego komponentu i wszystkich podkomponentów.

Pierwsza moja myśl była - a gdyby przepisać obiekt stanów (this.state), jak to jest w komponentach klasowych do store Reduxa Toolkita? Tylko nie mam pomysłu, czy w przypadku komponentów funkcyjnych (wszystko piszę w funkcyjnych) istnieje taka możliwość, żeby uniknąć ręcznego dodawania każdego stanu po kolei? Chociaż nawet gdybym zapisał stany, to refów w takim `this.state` nie ma i musiałbym i tak je obsłużyć ręcznie. 

Może są jakieś biblioteki do zatrzasku całego stanu komponentów (całej instancji)? Lub czy da się to jakoś z pomocą redux-toolkit wykonać, a jak tak to jak? Póki co nie potrafię nic sensownego odnaleźć ;( Tak żeby się nie narobić :D

Z góry dziękuję za wszystkie wskazówki.

 

Answer 1

Korzystałeś kiedykolwiek z reduxa? Zacznij od jego czystej formy bez całego toolkita bo wydaje mi się że nie za bardzo rozumiesz koncepcje state w redux. Redux po to własnie jest aby móc stan sobie łatwo przywracać. I dobra praktyką jest przechowywanie tylko danych które mogą być serializowane do JSONa. 

Refami nie musisz się przejmować state ma być po to aby na podstawie state można było wyrenderować na nowo komponenty i przypisać nowe Refy. ;) 

Dwa lata temu robiłem małą prymitywną aplikacje zapisując właśnie stan wszystkiego w localStorage i odczytywałem go to refreshu strony. Wydaje mi się że analiza może Ci się przydać ;) 

Tutaj możesz poklikać : 

https://bajdzis.github.io/scan-goals/

Tutaj możesz popatrzeć na kod : 

https://github.com/Bajdzis/scan-goals

Pobieranie startowego stanu oraz aktualizacje zrobiłem w tym pliku 

https://github.com/Bajdzis/scan-goals/blob/master/src/store/root.ts#L31-L39

Comments

Na początku dziękuję za odpowiedź ;)

To prawda, że nie używałem nigdy czystego reduxa, ale sporo obejrzałem z nim poradników. Na ich bazie budowałem swoją podstawową wiedzę pod redux-toolkit. I wydaje mi się, że w rozumiem jak działają akcje, reducery, selectory i sam w sobie store - już kilka dużych aplikacji w oparciu o nie napisałem (używając hooków react-redux i @reduxjs/toolkit jako konfiguracji store).

Przeanalizowałem Twój kod i apkę i niestety, to nie jest to o co mi chodziło. W tych przykładach własnoręcznie budowałeś wszystkie stany trzymane w store. A tego właśnie chciałbym uniknąć, żeby się nie narobić. ~Ponoć leniwy programista, to dobry programista xd~ Bo musiałbym teraz budować reducer pod cały mój złożony komponent, który po kolei będzie dispatchował stany przy zmianach. Mógłbym to zrobić bez problemu, ale to mnóstwo pracy.

I stąd moje pytanie było, czy jest jakiś sposób, żebym nie musiał tego robić, tylko wrzucić "worek stanów całego komponentu" i na np. useEffect (bez dependency array) i wrzucać za pomocą jednego dispatch cały obiekt stanów do reduxa lub bezpośrednio do localestorage.

---

Teraz tak patrzę po kilku dniach odpoczynku od kodu i moje pytanie jest trochę bezpodstawne w tym konkretnym moim przypadku. Bo przejrzałem właśnie z ReactDevToolem komponent i faktycznie, nie wszystko mi będzie potrzebne do zapisu do profilu. Więc na piechtę wybieranie tego co potrzebuję dispatchować też da radę.

(Na ilustracji widać tylko niewielką część tego, co jest trzymane za pomocą hooków - useState, useRef)

Ale pytanie podtrzymuję, żeby wiedzieć na przyszłość, czy jest możliwość dostania się do obiektu wszystkich stanów i referencji w komponencie. Właściwie, tak jak to robi ReactDevTool.

---

Właśnie chodzi o to że aplikacje powinieneś napisać tak że nie robisz żadnego useState i wtedy nie masz problemów. I korzystasz tylko z useSelector ;) W useState, useRef trzymasz tylko dane które nie są Ci potrzebne. Np aktualna data która się zmienia i nie ma sensu jej zapisać. Wątpię żeby był jakiś sposób do dostania się do tego wszystkiego. Metody odpowiedzialne za pobieranie danych dla profilowania Reacta nie występują w wersji produkcyjnej.

---

A to ja się spotkałem właśnie z odwrotną teorią :D, że w store powinno się trzymać tylko, to co jest mega zagnieżdżone (jako bardziej elegancka alternatywa useReducer) lub to co globalne (np. język aplikacji, motyw, czy sidebar jest zwinięty itd.). A stany komponentów w komponentach, żeby były jak najbardziej uniwersalne i elastyczne. Dlatego komponent mojej tabelki ma założenie, którego się trzymam, że nie ma ani jednego selectora, ani dispatcha - wrzucasz go w dowolnym projekcie, nawet bez reduxa i ma działać.

Ostatecznie zadecydowałem, że obsłużę wybrane stany / refy, które będą potrzebne do zapisu do profilu. A do samego komponentu dodam dwa nowe propsy:
1. Wartość początkowa profilu - useSelector z equalityFn zwracającym true (żeby tylko raz odczytało z reducera, który sobie przeczyta z localestorage,
2. Event onProfileChange, który z zewnątrz komponentu można sobie obsłużyć i podłączyć do Reduxa lub czego ktoś będzie sobie potrzebował w zależności od projektu - useDispatch zwracanej wartości z eventu.

Tak chyba będzie najlepiej, żeby komponent potem mógł posłużyć, jako "biblioteka". :)

 

Dziękuję serdecznie za sugestie i podesłane przykłady. :)

---

Trzymanie języków w redux to zbrodnia :D Bo każda akcja wywołuje selektory w każdym komponencie. Redux korzysta z contextAPI w React. Warto czasem stworzyć swój własny kontekst np do języków aby mniej selektorów było uruchamianych przy zmianie stanu.

Zamiast wykorzystywać konteksty możesz skorzystać z kompozycji. Czyli zamiast przekazywać propsy przed kilka komponentów przekazać sam komponent jako props 

<App menu={<Menu some={'string" />} />

Dzięki temu nie musisz przekazywać propsa some prze kilka komponentów. 

Nawet jeśli piszesz komponent niezależny od stanu aplikacji to warto robić sobie komponenty pomocnicze np tak. 

const TableWithRedux = () => {
     const data = useSelector(getData);

     return <Table data={data } />;
}

Dzięki temu masz wszystko w redux a komponent Table jest możliwy do wykorzystania wielokrotnie ;)