00:00:01
Ciao I coders in questa coding Pill
00:00:03
vedremo delle tecniche un po' più
00:00:04
avanzate di redax soprattutto per
00:00:07
organizzare meglio il nostro codice e
00:00:09
cercare di fare meno errori classici
00:00:11
errori insomma i typo Ecco le azioni con
00:00:14
i tipi magari che non combaciano tra il
00:00:17
momento in cui le dispacci e il case che
00:00:20
avete impostato nel reducer e vediamo
00:00:22
anche come parlando del reducer provare
00:00:24
a spezzarlo in reducer più piccoli Se
00:00:27
necessario Ecco al fine di migliorare la
00:00:30
leggibilità e soprattutto la mantenibili
00:00:32
tà del vostro codice a lungo andare
00:00:35
allora mi sono permesso di modificare un
00:00:37
attimo la il progetto da cui Insomma che
00:00:40
avevamo preso ieri per la coding Pill
00:00:42
Quindi adesso il nostro counter non ha
00:00:44
solo un bottone che lo incrementa ma ha
00:00:46
sempre il bottone che lo incrementa
00:00:48
neanche un altro che lo decrementa ed è
00:00:50
anche possibile salvare il proprio nome
00:00:52
all'interno di dello Store di redax al
00:00:56
fine di Insomma condividere
00:00:57
potenzialmente queste informazioni in
00:01:00
tutta l'applicazione Ecco tutte le
00:01:01
azioni che sono successe fino adesso
00:01:03
sapete che con gli strumenti di sviluppo
00:01:04
potete addirittura vedete tornare
00:01:06
indietro e vedere insomma le azioni che
00:01:08
una alla volta riprendono forma nella
00:01:11
vostra app Perfetto Allora il mio stato
00:01:14
di redax adesso è diviso in due perché
00:01:16
ho tenuto sempre la proprietà dentro
00:01:18
main ma ho salvato la la possibilità di
00:01:21
mettere il nome il proprio nome Ecco in
00:01:23
una Sli diversa chiamata user eh per
00:01:27
quanto riguarda il codice ho lavorato
00:01:29
per per semplicità eh solamente in app
00:01:32
js Insomma non ho diviso ulteriormente
00:01:35
in componenti ho creato sostanzialmente
00:01:37
un input Field che all'invio dalla
00:01:41
pressione del tasto Enter Ecco quindi al
00:01:42
submit del form Invia dis spaccia
00:01:45
un'azione verso redax del tipo di un
00:01:48
tipo nuovo set username utilizzando
00:01:51
l'input Value Quindi il valore che avevo
00:01:53
messo nell' input al fine di salvarlo
00:01:55
dentro il redax Store come abbiamo
00:01:57
appena visto nella sezione bassa invece
00:01:59
ho aggiunto anche un pulsante per
00:02:01
decrementare il valore del contatore
00:02:04
quindi incrementando Ecco incrementiamo
00:02:06
di tre decrement decrementi di due E
00:02:09
sostanzialmente manteniamo aggiornato il
00:02:11
valore in ogni momento perché il nostro
00:02:13
reducer adesso non ha più solamente la
00:02:16
Slice di main Ma neanche una dedicata
00:02:17
all'utente Questa era l'azione che
00:02:20
avevamo scritto ieri ne ho aggiunte
00:02:22
altre due ma in una situazione più
00:02:23
complessa Voi capite che potremmo avere
00:02:25
un redax con de un reducer scusate con
00:02:28
decine di i e quindi di case da gestire
00:02:32
e in questo caso ne abbiamo tre una per
00:02:34
incrementare una per decrementare e Lo
00:02:36
username che di fatto cambia e accetta
00:02:39
un payload per il nuovo valore di name
00:02:42
Allora come come potremmo riuscire a
00:02:45
semplificare questa struttura Ecco
00:02:48
soprattutto renderla un pochettino più
00:02:50
stabile Allora non mi piace tanto che ad
00:02:53
esempio i nomi i tipi giusto delle
00:02:55
azioni siano scritti così come stringhe
00:02:59
e questo mi obbliga a stare molto
00:03:01
attento nel momento in cui devo poi
00:03:03
riscriverli a mano sempre nel reducer
00:03:05
perché se io qua sbaglio e e scrivo il
00:03:08
nome di un'azione che in realtà non è
00:03:10
quello corretto io perdo mi mangio
00:03:12
l'azione per strada sappiamo che reducer
00:03:14
di default non eseguirà niente Non
00:03:16
apporterà nessuna modifica quindi è
00:03:19
prassi comune per risolvere questo
00:03:20
problema creare una
00:03:23
nuova cartella sotto cartella dentro
00:03:26
diciamo la cartelloni di redx che si
00:03:29
chiama Action in cui dentro come al
00:03:31
solito ci Scriveremo un file che si
00:03:32
chiama Index js Allora L'idea è di
00:03:35
spostare tutte le nostre azioni
00:03:37
all'interno di questo file separato in
00:03:40
modo da renderle più riutilizzabili e in
00:03:42
modo da poterle sostanzialmente
00:03:44
ritornare
00:03:45
Eh come valore appunto di ritorno di una
00:03:49
funzione Allora ti spiego qui eh ad
00:03:53
esempio il mio bottone per incrementare
00:03:55
Ecco prendiamo il bottone che abbiamo
00:03:57
fatto l'altra volta e fa un al suo click
00:04:00
diciamo dis spaccia questa azione Allora
00:04:03
guarda cosa faccio io taglio l'azione e
00:04:07
la incollo dentro il mio file actions e
00:04:11
adesso la rendo il valore di ritorno di
00:04:14
una funzione per esempio questa azione
00:04:16
incrementa bene io chiamerò la mia
00:04:18
azione
00:04:19
increment action Questa è una funzione
00:04:23
che
00:04:26
ritorna Ok che ritorna
00:04:31
Eccoci qua la mia azione questo viene
00:04:34
chiamato in gergo un Action Creator
00:04:37
ovvero una funzione che ritorna
00:04:39
un'azione ok
00:04:41
Eh lo esportiamo e adesso lo utilizziamo
00:04:46
al posto dell'oggetto ogni volta che ne
00:04:48
abbiamo bisogno quindi tornando in app
00:04:51
Ecco che avevo lasciato qua il buco
00:04:54
invece che dispec l'azione io dispecer
00:04:57
ehm l'azione che ho appena creato Ok in
00:05:02
modo da alleggerire il mio componente il
00:05:04
mio componente non sa esattamente qual è
00:05:07
l'azione che viene andata a dispacci
00:05:09
charsi la sa l'action Creator che
00:05:12
appunto nel quale appunto voi scriverete
00:05:14
la funzione una ed una sola volta al
00:05:16
fine di renderla più riutilizzabile e
00:05:18
meno prone ad errori volendo potete
00:05:21
anche pensare di passare un parametro e
00:05:24
di ricevere questo parametro E quindi
00:05:26
che ne so di rendere il il payload ad
00:05:29
esempio dinamico Ecco in questo modo il
00:05:31
payload cambia ogni volta che che
00:05:33
invocate questo Action Creator magari
00:05:35
qua incrementa di C da un'altra parte
00:05:38
incrementa di due da un'altra incrementa
00:05:39
di tre Insomma potete renderla un
00:05:41
pochettino più dinamica facciamo lo
00:05:43
stesso lavoro per l'azione di tipo
00:05:45
decrement quindi creo
00:05:48
un decrement Action un altro Action
00:05:51
Creator Facciamo che anche lui riceve un
00:05:54
Value e che quindi l'azione che viene
00:05:58
ritornata anche lei ha un Value dinamico
00:06:01
e quindi invece che dispare direttamente
00:06:04
l'azione Dispaccio l'invocazione di
00:06:06
questo Action create con magari due Così
00:06:09
abbiamo la situazione che era prima Ecco
00:06:11
una struttura già più leggibile
00:06:14
completiamo la parte che ci manca Quindi
00:06:16
l'ultima azione del nostro del nostro
00:06:23
progetto Io le chiamo sempre per
00:06:26
coerenza no tutte uguali con con Action
00:06:30
alla fine anche qua Beh qua chiaramente
00:06:32
input Value deve no questo qua è il name
00:06:35
deve arrivare
00:06:37
da come parametro altrimenti non è un
00:06:40
numero fisso questo cambia per forza di
00:06:42
volta in volta dobbiamo sempre invocarlo
00:06:44
con il valore salvato nell' input Field
00:06:47
questo qua è set username Action a quii
00:06:51
passiamo input Value bene E dopo questa
00:06:54
questa Riga non si occupa altro che
00:06:55
azzerare il form una volta che l'azione
00:06:58
è stata dispec cata bene quindi abbiamo
00:07:00
già eh esportato le nostre azioni
00:07:03
volendo le potremmo anche riutilizzare
00:07:04
in altri componenti un'altra cosa che
00:07:07
puoi fare è ehm impostare in modo
00:07:10
statico in modo costante questi Action
00:07:13
Type Ad esempio in modo qual è il
00:07:15
problema appunto da evitare ambiguità
00:07:17
nello scriverli a mano sia qua sia nei
00:07:20
casi del reducer creiamoci una
00:07:23
costante che ha il
00:07:26
valore della stringa ok Ecco in questo
00:07:31
modo Noi praticamente invece che
00:07:33
utilizzare la stringa noi utilizziamo la
00:07:35
costante che punta alla stringa questo
00:07:38
Cosa comporta comporta il fatto che qua
00:07:40
Tu non puoi non puoi sbagliare di
00:07:42
scrivere il nome e anzi ti verrà
00:07:44
addirittura suggerito e non avrai
00:07:46
possibilità di errore quindi facciamolo
00:07:49
per tutte e tre le nostre costanti
00:07:51
questo è
00:07:52
decrement questo è set username Eccoci
00:07:56
qua adesso posso togliere gli apici e
00:08:00
utilizzare Le costanti questo mi
00:08:02
permette anche di riutilizzare queste
00:08:04
costanti nel
00:08:05
reducer perché qua io vado a importarmi
00:08:09
increment vado a importarmi decrement e
00:08:13
vado a importarmi set username così
00:08:16
riutilizzo no Le costanti dichiarate in
00:08:19
actions se cambierò il valore di questa
00:08:21
costante cambierà sia nel tipo sia nel
00:08:24
reducer case quindi di fatto non avrò
00:08:26
possibilità di
00:08:28
errore un'altra cosa che abbiamo
00:08:30
imparato a fare oggi era ridurre in
00:08:34
reducer più piccoli e multipli plurimi
00:08:37
volendo e un grosso reducer come il
00:08:40
nostro main reducer potremmo pensare di
00:08:43
separare il reducer dai casi che
00:08:45
riguardano diciamo la Slice main da il
00:08:48
singolo caso che riguarda la Slice user
00:08:51
quindi facciamo due reducer ne creo un
00:08:54
altro Allora uno lo
00:08:56
chiameremo Main reducer Anzi main
00:08:59
reducer rimane Perché di fatto è il nome
00:09:01
della Slice quindi main reducer come
00:09:03
nome mi piace creeremo un altro però che
00:09:05
si chiama user
00:09:07
reducer Ecco quindi chiamiamoli main
00:09:10
reducer e user reducer user reducer sarà
00:09:15
uguale a main reducer ma adesso noi
00:09:18
chiaramente andiamo a sfoltire main
00:09:21
reducer di tutti i casi che non lo
00:09:23
riguardano Ok quindi set username in
00:09:26
questo caso perché main reducer deve chi
00:09:29
avere solo a che fare con la Slice main
00:09:31
Questo è il motivo per cui l'abbiamo
00:09:32
chiamato così
00:09:33
Eh ma c'è di più Noi non avremo neanche
00:09:36
la Slice di user in questo reducer
00:09:39
perché questo reducer adesso si terrà
00:09:41
sostanzialmente
00:09:43
aggiornata terrà sostanzialmente
00:09:45
aggiornato solamente la propria Slice di
00:09:47
main senza neanche il sottog getto main
00:09:51
Cioè lui praticamente il suo contenuto
00:09:52
Come puoi vedere è il contenuto della
00:09:56
precedente Slice main quindi main era
00:09:58
così Ecco che più quell'altra più la
00:10:01
Slice user Ecco noi abbiamo solamente
00:10:03
mantenuto il valore del contenuto di
00:10:06
main ok Quindi questo è main reducer
00:10:08
Questo è lo stato che riceve Come
00:10:10
initial state all'inizio e questo è lo
00:10:12
stato che deve anche mantenere quindi
00:10:14
non ritorneremo un oggetto con dentro la
00:10:17
Slice main vedi Ma noi sostanzialmente
00:10:19
il nostro state È già questa cosa qua
00:10:21
noi dobbiamo tornare una struttura
00:10:23
simile a
00:10:24
questa quindi ecco che sostanzialmente
00:10:27
ci ritorniamo a state cioè il contenuto
00:10:29
di questo oggetto e poi torniamo
00:10:31
immediatamente alla proprietà count che
00:10:33
sarà a partire da statec questo qua è
00:10:36
già statec +
00:10:38
action.py stessa cosa per il case
00:10:44
decrement Ecco qua Quindi come vedi
00:10:47
Abbiamo semplificato i nostri reducer
00:10:49
perché non dobbiamo più tornare un
00:10:51
oggetto con dentro un oggetto ma
00:10:54
sostanzialmente ogni reducer si occuperà
00:10:56
di mantenere la propria piccola fetta
00:10:58
dello Store facciamo lo stesso lavoro
00:11:00
per user reducer solo all'inverso perché
00:11:03
user reducer manterrà solamente la
00:11:05
proprietà name al proprio interno non ha
00:11:09
sicuramente da condividere i i case di
00:11:12
increment e decrement ha solo set
00:11:14
username che ritornerà direttamente un
00:11:16
oggetto sostanzialmente fatto più o meno
00:11:19
così quindi ritorna riceve questo
00:11:22
oggetto ritorno un oggetto della stessa
00:11:25
forma a questo punto abbiamo i due
00:11:28
reducer ATI è il caso di riunirli
00:11:31
insieme nel nostro Store perché se ti
00:11:33
ricordi di reducer di posto per il
00:11:35
reducer ce n'è uno solo quale importiamo
00:11:38
main
00:11:40
reducer oppure user reducer e ne abbiamo
00:11:44
due no Quindi come facciamo adesso Beh
00:11:46
li combineremo insieme Grazie a una
00:11:49
funzione che si chiama combine reducers
00:11:51
e creeremo di fatto un reducer
00:11:55
combinato chiamiamolo Big reducer questo
00:11:58
che cos'è è l'invocazione di combine
00:12:01
reducers con un oggetto che
00:12:05
ricombinano a main reducer e user
00:12:09
riassegnare user main e user sono i nomi
00:12:14
delle Slice del nostro Store ok Quindi
00:12:18
per ricreare la struttura di prima se ti
00:12:19
ricordi avevamo main e user adesso main
00:12:22
si riassegna a main reducer e user si
00:12:25
riassegna a user reducer ogni reducer
00:12:27
comanda una porzione dello Stato che
00:12:29
però poi viene ricombinato insieme
00:12:31
dentro Big reducer che diventa il nostro
00:12:34
reducer di riferimento a questo punto
00:12:37
l'applicazione dovrebbe funzionare
00:12:39
esattamente come prima come vedi Abbiamo
00:12:41
sempre le nostre due Slice tutto
00:12:43
Continuerà a funzionare perché di fatto
00:12:45
abbiamo solamente separato i valori le
00:12:48
azioni vengono dispacci come prima I
00:12:50
reducer le catturano come prima E tutto
00:12:53
Rimane sostanzialmente invariato L'unica
00:12:55
cosa che cambia è che adesso abbiamo una
00:12:57
struttura decisamente più
00:12:59
mantenibile ultimo passaggio e questo te
00:13:02
lo faccio in velocità abbiamo anche
00:13:04
imparato che possiamo creare un diverso
00:13:06
tipo di action Creator un Action Creator
00:13:09
diciamo nato per operazioni asincrone
00:13:11
qualora tu debba per esempio riempire il
00:13:14
tuo Store con dei dati che non
00:13:15
provengono da una fonte statica da una
00:13:18
da una fonte sincrona come Nel nostro
00:13:21
caso le azioni che abbiamo fatto fino
00:13:23
adesso ma che magari debbano provenire
00:13:24
dall'esterno Ecco poiché non puoi
00:13:27
inserire nel reducer nessuna logica
00:13:30
asincrona né tantomeno diciamo una
00:13:33
logica fallace con delle operazioni e
00:13:35
delle delle logiche che possono fallire
00:13:38
al di fuori del controllo del reducer
00:13:40
quello che succede È che noi andiamo a
00:13:43
fornire al reducer le informazioni
00:13:45
prelevate dalla fetch recuperate a Monte
00:13:48
Quindi da un Action Creator redax ti
00:13:51
permette di costruire uno speciale
00:13:53
Action
00:13:56
Creator sostanzialmente crea un Action
00:13:59
Creator che non ritorna una azione che
00:14:03
non ritorna una Action come tutti gli
00:14:05
altri Action Creator che abbiamo creato
00:14:07
ma che ritorna a una funzione questa
00:14:10
funzione volendo può essere asincrona
00:14:13
Quindi tu qua dentro puoi fare per
00:14:14
esempio le tue fetch o le operazioni
00:14:16
asincrone che desideri Ricordati che
00:14:19
questa funzione viene inoltre arricchita
00:14:20
da redax da due metodi il metodo
00:14:23
dispatch che è quello che già conosci e
00:14:25
il metodo Get state che di fatto ti
00:14:27
permette se invocato di conoscere
00:14:29
immediatamente di avere a tua
00:14:31
disposizione il corrente stato del redx
00:14:34
Store in modo qui dentro da poter fare
00:14:36
una fetch da poter capire lo stato
00:14:38
corrente poter effettivamente ed
00:14:41
eventualmente recuperare le informazioni
00:14:43
che ti servono e alla fine di tutto
00:14:45
dispacci il tuo risultato Quindi qua
00:14:47
alla fine puoi pensare di dispacci l'at
00:14:50
azione di che ne so che magari hai
00:14:52
recuperato dei dei dei film da da far
00:14:56
vedere nell'interfaccia e come payload
00:14:58
qua ci Met No il il risultato qua
00:15:02
metteresti due punti che ne so il
00:15:04
risultato di una fetch no magari fai due
00:15:07
fa una fetch secondo Den ottieni data
00:15:09
Ecco che puoi dispec un'azione e mandare
00:15:12
al reducer Magari il risultato di
00:15:14
un'operazione asincrona Ecco questo è
00:15:17
questa è la forma degli Action Creator
00:15:20
asincroni di che redax ti mette a
00:15:23
disposizione questo è tutto il riassunto
00:15:25
di quello che abbiamo fatto
00:15:27
sostanzialmente stamattina Io ti auguro
00:15:29
un buon proseguimento e ci vediamo alla
00:15:30
prossima cod inel
