State Management w aplikacjach SPA - kiedy?

Cześć,

mam pytanie odnośnie frameworków front-endowych przy pisaniu aplikacji SPA (Angular, React, Vue, etc).
W każdym kursie przewija się coś takiego jak "state management'. Jak np NGRX w przypadku Angulara.
Wygląda fajnie ale przedstawione przykłady pokazują jak np zaimplementować listę klientów, gdzie dodajemy/usuwamy nowego użytkownika i to wszystko leci przez cały proces mechanizmu state managementowego (Action -> Reducer -> State -> Selector, itd).

Super, tylko po co?

To jest moje pytanie. Czemu nie możemy mieć tego w komponencie, nawet na wyższym posiomie typu (AppComponent) ?
Kiedy jest zasadne użycie mechanizmu stanów jak NGRX?

Spróbuj sobie wyobrazić kod aplikacji która zarządza "state" w App na przykładzie np. Facebooka.

State z App musisz propsami przekazywać na dół. Więc przy kilku zagnieżdzeniach już sam nie będziesz za bardzo wiedział po co przekazujesz danego propsa na wyższych poziomach i który komponent z tego korzysta - ew. jak sam piszesz aplikację i jest dosyć mała to pewnie dasz radę.

Jeżeli tworzysz aplikację i widzisz, że bardzo dużo kodu odpowiada za przekazywanie state niżej i ogólnie sprawia Ci to problem to wtedy korzystasz z jakiegoś "state managera".

Dlatego że aplikacje potrafią być bardzo rozbudowane. I wyobraż sobie że np. masz sklep internetowy i masz listę produktów z możliwością dodania do koszyka, oraz licznik u góry w nawigacji z produktami które dodałeś do koszyka. I teraz są to 2 odrębne komponenty daleko od siebie. I co w takim razie masz w takiej sytuacji zrobić? będziesz miał state bardzo wysoko i pchał te zmienne przez np. 10 komponentów w dół do nawigacji i listy produktów? Bardzo szybko się zrobi z tego taki syf że sam nie będziesz wiedział co się dzieje, a tym bardziej ktoś kto tego kodu nie pisał.
state globalny to miejsce gdzie są rzeczy używane przez więcej niż 1 komponent (co nie usuwa lokalnego statu jeśli potrzebujesz jakiś danych tylko w nim).

Dziękuję za odpowiedzi.

Czyli trochę upraszczając to taki obiekt, który jest swego rodzaju "static". Widziany wszędzie w każdym komponencie, bez wstrzykiwania itp.
Tylko nie bardzo rozumiem, po co te wszystkie actiony, reducery a nie po prostu globalnie dostepny obiekt state z możliwością modyfikacji, metodami, etc

to nie jest static, bo możesz to modyfikować. Ano po to aby komponent się odświeżył, że jak zmienisz state to zmienią się wszytkie komponenty w których jest używany.

Jeśli miałbyś to globalnie dostępne i bezpośrednio mutowalne to szybko doszło by do sytuacji że coś gdzieś zmienia fragment stanu którego nie powinno. Wtedy łatwo o bugi których znacznie ciężej by było znaleźć przyczynę. Poza tym dzięki tym akcjom frameworki takie jak Redux czy Vuex pozwalają używać narzędzi developerskich pokazujące historię zmian stanu, umożliwiające cofanie tego stanu itp.

No i do tego dochodzi oczywiście to co napisał kolega wyżej czyli automatyczne odświeżanie komponentów które korzystają z danego fragmentu stanu.