React: Czym jest action creator

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się z sukcesem zdispatch'ować

0:04dwie akcje, które dodają nam notatki do naszego store'u, tylko

0:08problem jest taki, że te akcje piszemy z łapy, piszemy

0:12je po prostu na sztywno, każdej dodajemy jakąś nową nazwę, jakiegoś nowego

0:17consta, później to podajemy tutaj. Teoretycznie moglibyśmy robić jeszcze

0:21tak, że w ogóle nie tworzyli nazw tylko robimy coś takiego i to

0:26oczywiście również by działało. Natomiast

0:33naszym celem jest stworzenie nie akcji, ale

0:37Action Creator'a, czyli takiej funkcji, która tworzy akcje

0:41w sposób automatyczny i może to brzmieć bardzo

0:45skomplikowanie natomiast jest naprawdę banalne. Teraz sobie taką

0:49akcję stworzymy. Konwencja nazewnicza dla Action

0:54Creator'ów jest taka, żeby naprawdę po prostu były samo wytłumaczalne,

0:59to znaczy jeśli dodać notatkę, no to nasz Action Creator z tym związany będzie

1:03się nazywał add note. To co add note przyjmuje jako parametr to oczywiście

1:07notatka, a to co zwraca to

1:12obiekt, który już znasz z typem, który jest

1:16zawsze taki sam i z payload'em,

1:20który w naszym przypadku jest notatką i w

1:25ten sposób stworzyliśmy nasz pierwszy Action Creator. Teraz jak zdispatch'ować

1:29Action Creator'y. Oczywiście to również jest bardzo proste, wystarczy podać do

1:36dispatch'a add note i zawartość notatki, którą

1:40chcemy przekazać. W tym przypadku niech to będzie Hello Roman i teraz

1:45to zapiszmy i tutaj wkradł nam się mały błąd. Ten

1:50obiekt muszę niestety zamknąć w taki sposób i teraz

1:56jak widzisz obiekt do naszego stare'a został dodany. Jeśli

2:01teraz sobie to skopiuję i wpiszę

2:06tutaj coś innego to zauważysz, że ta akcja również

2:10spowodowała dodanie nowej notatki i w ten sposób dzięki

2:14Action Creator'om jesteśmy w stanie właśnie tworzyć nowe akcje

2:18bez konieczności tworzenia ich ręcznie, czyli

2:22bez konieczności dodawanie typu do każdej z nich i tak dalej. W ten

2:28sposób też będziemy tworzyć właśnie akcje w naszej aplikacji dzięki

2:32tym Action Creator'om. Zobaczysz też, że Action Creator'y są zdolne do

2:36dużo większych rzeczy niż tylko do tworzenia takich prostych obiektów. Zachęcam

2:41cię teraz do stworzenia takiego store'a samodzielnie nawet właśnie na Code Penie,

2:45importując wyłącznie tego redux'a w taki sposób i pobawimy

2:49się trochę tym, jak to wszystko działa. Możesz stworzyć store'a dotyczącego notatek

2:54albo czegoś innego. Może być też na przykład zwykły licznik, bo jeśli tutaj

2:58stworzysz na przykład zmienną counter, która będzie wynosić

3:020 to możesz stworzyć akcje, które będą zwiększać

3:06albo zmniejszać ten counter. To też jest taki dość popularny przykład. Generalnie warto

3:10zrozumieć jak redux działa od takich zupełnych podstaw, bo później kiedy

3:14w naszym projekcie zaczniemy dodawać już taką większą strukturę plików

3:18gdzie reducer'y będą osobne od Action Creator'ów i tak dalej, to

3:23może się dość mocno skomplikować i może być ciężkie do zrozumienia, ale jeśli

3:27się dobrze zrozumie to od samych podstaw, że równie dobrze mogło by to wszystko

3:31być w jednym pliku to nagle ten redux staje się trochę mniej straszny. Zostawiam

3:37cię z tym na chwilę i widzimy się już w naszym projekcie, gdzie zaczniemy

3:41tworzyć strukturę pod naszego redux'a.