1
00:00:02,570 --> 00:00:08,780
Lo stato può essere complesso ed è importante capirlo per capire quali problemi risolvono le

2
00:00:08,780 --> 00:00:12,220
soluzioni di gestione dello stato come Redux.

3
00:00:12,320 --> 00:00:17,930
Se avessimo un'app come questa, che non è l'app che abbiamo creato ma che potrebbe essere un'app che stai costruendo in

4
00:00:17,930 --> 00:00:23,180
cui hai due aree diverse, una in cui gestisci i tuoi utenti, dove gli utenti possono accedere, dove gli

5
00:00:23,180 --> 00:00:28,100
utenti possono gestire le loro dashboard, vedere il loro dashboard e così via e uno in cui sono

6
00:00:28,100 --> 00:00:30,100
presenti prodotti in un elenco che gli

7
00:00:30,100 --> 00:00:35,480
utenti possono aggiungere a un carrello, quindi queste aree in realtà non sono totalmente indipendenti ma nella tua app, verranno

8
00:00:35,480 --> 00:00:38,290
visualizzate su schermi diversi, quindi piuttosto separati da l'un l'altro.

9
00:00:38,630 --> 00:00:44,630
Ma la domanda se un utente ha effettuato l'accesso di cui hai bisogno qui potrebbe anche essere

10
00:00:44,630 --> 00:00:46,100
rilevante in un'altra

11
00:00:46,280 --> 00:00:52,550
parte della tua applicazione e in questo momento, normalmente dovresti passare quei dati manualmente attraverso i puntelli

12
00:00:52,550 --> 00:00:57,930
passandoli dal componente A a B a C a D fino a E dove

13
00:00:57,970 --> 00:01:00,490
potresti averne bisogno, non è molto conveniente.

14
00:01:00,500 --> 00:01:06,980
Invece vuoi avere una configurazione dell'applicazione in cui qualcosa cambia, ad esempio un utente accede o nella nostra

15
00:01:06,980 --> 00:01:07,900
app pasti,

16
00:01:07,910 --> 00:01:15,080
imposta un certo filtro e lo salvi e quindi queste informazioni vengono in qualche modo propagate alla tua app e passate

17
00:01:15,080 --> 00:01:19,420
automaticamente ai luoghi dove ne hai bisogno ma non attraverso oggetti di

18
00:01:19,520 --> 00:01:26,120
scena ma con alcuni meccanismi dietro le quinte che ti aiutano a riguardo e qui è dove Redux è

19
00:01:26,120 --> 00:01:31,370
una soluzione comune che utilizziamo nelle app React e React Native per gestire quello stato.

20
00:01:31,370 --> 00:01:33,170
Ora come funziona Redux?

21
00:01:33,200 --> 00:01:38,420
Prima di tutto Redux è una libreria di terze parti che puoi aggiungere a React Native per usarla

22
00:01:38,450 --> 00:01:45,050
lì ed è tutto su come avere un negozio centrale. Redux introduce un archivio centrale in memoria, non un

23
00:01:45,110 --> 00:01:51,950
database ma è in memoria, nella memoria Javascript per dire dove si trova lo stato della tua applicazione, quindi

24
00:01:51,950 --> 00:01:58,070
i dati su cui dipendono parti diverse dell'app possono essere archiviati e quando in un componente hai

25
00:01:58,070 --> 00:01:59,280
qualcosa che

26
00:01:59,330 --> 00:02:03,740
vuole manipolare quello stato, ad esempio stiamo impostando un filtro o

27
00:02:03,770 --> 00:02:10,610
contrassegniamo un pasto come preferito, quindi inviamo una cosiddetta azione, che è un pacchetto di informazioni predefinito che diresti,

28
00:02:10,610 --> 00:02:15,840
con un certo schema che può essere gestito da Redux come da te configurato.

29
00:02:15,860 --> 00:02:20,800
Questa azione raggiunge un cosiddetto riduttore e sarai tu a scrivere quel riduttore come sviluppatore,

30
00:02:20,810 --> 00:02:25,270
in modo da poter controllare quale tipo di azione accetta un riduttore, quindi quale

31
00:02:26,060 --> 00:02:32,180
tipo di pacchetto informativo il riduttore richiede e quel riduttore riceve quindi l'azione e deriva un nuovo stato basato

32
00:02:32,480 --> 00:02:39,670
sul vecchio stato che quindi aggiorna questo stato memorizzato centralmente. Quindi il riduttore è lì per aggiornare

33
00:02:39,660 --> 00:02:42,500
lo stato alla fine.

34
00:02:42,500 --> 00:02:48,080
E quando quel negozio cambia, quando cambia lo stato lì dentro, puoi anche avere abbonamenti a quel

35
00:02:48,080 --> 00:02:53,050
negozio da altri componenti, questi abbonamenti saranno attivati quando il tuo negozio, quando il tuo stato

36
00:02:53,090 --> 00:02:57,340
lì cambia e lo stato aggiornato viene quindi passato ai luoghi nella tua

37
00:02:57,380 --> 00:03:01,040
app, quindi ai componenti interessati a queste modifiche, ad esempio questo

38
00:03:01,040 --> 00:03:05,720
componente qui potrebbe essere interessato ad alcuni aggiornamenti, quindi può impostare un abbonamento e

39
00:03:05,900 --> 00:03:08,190
verrà informato sull'aggiornamento e ottenere il

40
00:03:08,190 --> 00:03:14,130
nuovo stato attraverso il suo oggetti di scena o anche con ganci React come imparerai in questo modulo.

41
00:03:14,240 --> 00:03:19,620
Ecco come funziona Redux e questa è l'idea alla base di Redux.

42
00:03:19,700 --> 00:03:27,020
Ora una nota importante, se sei un po 'più avanti in React, probabilmente conosci anche l'API di React

43
00:03:27,050 --> 00:03:29,770
Context che è integrata in React.

44
00:03:29,810 --> 00:03:36,980
Questo può essere utilizzato anche per alcuni dietro le quinte dello stato e della gestione dei dati, ma non è un buon rimpiazzo per

45
00:03:36,980 --> 00:03:39,710
tutti i casi d'uso in cui si utilizza Redux.

46
00:03:39,710 --> 00:03:45,160
Non approfondirò qui questo perché questo non è davvero un corso sull'ingresso e l'uscita di diversi costrutti

47
00:03:45,170 --> 00:03:50,930
React, invece vogliamo imparare React Native qui ma in allegato, troverai alcune risorse che ti aiuteranno in quel

48
00:03:50,930 --> 00:03:58,030
confronto tra React Context API e Redux e quando usare quale. In questo modulo, utilizzeremo Redux, che è molto

49
00:03:58,050 --> 00:04:02,490
flessibile, che possiamo sicuramente usare e ti mostrerò come configurarlo con

50
00:04:02,490 --> 00:04:05,870
React Native e come ovviamente potresti lavorarci.