[Skona27]

Cześć!
Tutaj wasz ulubiony fanatyk maszyn stanowych i XState :)

Ostatnio kilka osób wątpiło w sens nauki XState i wykorzystywania maszyn stanowych do tworzenia zaawansowanych aplikacji i zarządzenia stanem. Napisałem więc dość obszerny post wprowadzający w temat maszyn stanowych i wyjaśniający zalety z korzystania z XState.

Całość dostępna na dev.to. Podsyłam link:
https://dev.to/skona27/future-of-state-management-in-react-with-xstate-kg4

#javascript #react #xstate #programowanie

[szczesc_borze]

@Skona27: No nie tylko we froncie. W backendzie to jest świetne rozwiązanie do utrzymywania stanu obiektów. Tutaj brakuje mi trochę teorii, bo state machine to nie jedyna możliwość. Jest jeszcze workflow, które pozwala przechować obiekt w więcej niż jednym stanie jednocześnie. W każdym razie fajnie, że się to zaczyna upowszechniać, bo akurat to ułatwia budowanie nie tylko całych aplikacji ale i je pojedynczych modułów. Przykładowo state machine idealnie nadaje się

[Pesio]

@Skona27: Xstate czy w ogóle maszyny stanu są ciekawe ale nie wiem po co miałbym tego używać w swojej aplikacji, jeśli w sumie większość tych korzyści daje mi już modelowanie danych na typach algebraicznych i pattern matching, na przykład za pomocą jakiegoś union buildera jak unionize.

[Skona27]

@Pesio: Podeślesz jakieś info w temacie? Pierwsze słyszę o union builderach

[Skona27]

@szczesc_borze: Dokładnie, to jest także dodatkowy plus korzystania z maszyn stanowych - wszystko jest mega czytelne, uporządkowane i elastyczne do rozbudowy

[Pesio]

@Skona27: Union buildery to takie helpery do tworzenia ADT z pattern machingiem w językach które nie wsperają tego natywnie jak TypeScript. Najpopularniejszy dla TSa to chyba ten: https://github.com/pelotom/unionize ale jest wiele innych. W takiej Scali 2 po prostu używam case class / enum w Scali 3 i słowa kluczowego match + case, następnie po prostu tworze monomorficzną funkcję a -> a, gdzie a jest moją instacją ADT i

[Skona27]

@Pesio: Jak te union buildery mogą pomóc w zarządzaniu stanem?

[GzS]

@Skona27: Fajny przykład i świetnie pokazuje koncept, ale nie do końca umiem sobie wyobrazić jakieś use case'y z prawdziwego życia, gdzie to rzeczywiście ułatwi pracę względem takiego Reduxa.

[Pesio]

@Skona27: W ten sposób, że union buildery ułatwiają pracę z ADT w TSie, ale nie są potrzebne same w sobie. Modelujesz stan jako unie typów, a następnie tworzysz zwykłą funkcje która na podstawie aktualnego stanu powię jaki ma być kolejny stan. Przesłałem już linka w jaki sposób pmaga to zardządzać stanem w akka. W Reatcie można to bardzo łatwo uzyskać z useReducer.

[Skona27]

@Pesio: Meh, to my coś takiego to już przerabialiśmy w mojej pracy. Wszystko było w porządku, dopóki flow, które modelowaliśmy było liniowe.Jak tylko zaczęliśmy realizować wprowadzać warunki na skomplikowane casy biznesowe, to całość zrobiła się mocno nieczytelna.

No i plus nie można tego w żaden sposób zwizualizować, tak jak maszyn stanowych z XState

[Skona27]

@GzS: Jeśli szukasz przykładu bardziej z życia, to zerknij na filmik, w którym tworzę komponent VideoPlayer z wykorzystaniem XState:
https://www.youtube.com/watch?v=ym8TQ8nLxuY&feature=youtu.be&ab_channel=JakubSkoneczny

[Pesio]

@Skona27: Rzeczywiście, XState ma przyjemne API, a wizualizacje to ciekawy bonus!
Mimo wszystko chcę podkreślić, że praktycznie identyczny pattern można zastosować bez tej libki, wgl bez żadnej libki do maszyn stanu - i to nie tylko w Reactcie. Możliwe, że dla większości przypadków będzie to rozwiązanie 'good enough' A jak bardzo czysto jest to zrobione to zależy już od zespołu. ( ͡° ͜ʖ ͡°)