1
00:00:02,570 --> 00:00:08,780
O estado pode ser complexo e é importante entender isso para entender quais problemas as soluções de

2
00:00:08,780 --> 00:00:12,220
gerenciamento de estado como o Redux realmente resolvem.

3
00:00:12,320 --> 00:00:17,930
Se tivéssemos um aplicativo como este, que não é o aplicativo que criamos, mas que pode ser um aplicativo que

4
00:00:17,930 --> 00:00:23,180
você está criando, onde você tem duas áreas diferentes, uma onde você gerencia seus usuários, onde os usuários

5
00:00:23,180 --> 00:00:28,100
podem entrar, onde os usuários podem gerenciar seus painel, veja o painel deles, etc., e onde você

6
00:00:28,100 --> 00:00:30,100
tem produtos em uma lista que

7
00:00:30,100 --> 00:00:35,480
os usuários podem adicionar a um carrinho, essas áreas não são totalmente independentes, mas, no aplicativo, elas serão

8
00:00:35,480 --> 00:00:38,290
renderizadas em telas diferentes, tão separadas de entre si.

9
00:00:38,630 --> 00:00:44,630
Mas a questão de saber se um usuário está conectado e que você precisa aqui também pode

10
00:00:44,630 --> 00:00:46,100
ser relevante em

11
00:00:46,280 --> 00:00:52,550
outra parte do seu aplicativo. No momento, você normalmente precisa passar esses dados manualmente através de adereços, passando

12
00:00:52,550 --> 00:00:57,930
do componente A para B para C para D até E onde você talvez precise

13
00:00:57,970 --> 00:01:00,490
disso, isso não é realmente muito conveniente.

14
00:01:00,500 --> 00:01:06,980
Em vez disso, você deseja ter uma configuração de aplicativo em que algo mude, por exemplo, um usuário faz login

15
00:01:06,980 --> 00:01:07,900
ou em

16
00:01:07,910 --> 00:01:15,080
nosso aplicativo de refeições, define um determinado filtro e salva e, em seguida, essas informações são propagadas para o seu aplicativo e

17
00:01:15,080 --> 00:01:19,420
passadas automaticamente para os locais onde você precisa, mas não por meio de

18
00:01:19,520 --> 00:01:26,120
adereços, mas com algum mecanismo nos bastidores que o ajuda a esse respeito e é aí que o Redux é

19
00:01:26,120 --> 00:01:31,370
uma solução comum que usamos nos aplicativos React e React Native para gerenciar esse estado.

20
00:01:31,370 --> 00:01:33,170
Agora, como o Redux funciona?

21
00:01:33,200 --> 00:01:38,420
Antes de tudo, o Redux é uma biblioteca de terceiros que você pode adicionar ao React Native para

22
00:01:38,450 --> 00:01:45,050
usá-lo lá e é tudo sobre ter um repositório central. O Redux introduz um armazenamento central na memória, não

23
00:01:45,110 --> 00:01:51,950
um banco de dados, mas está na memória, na memória Javascript, para dizer onde está o estado do seu aplicativo,

24
00:01:51,950 --> 00:01:58,070
para que os dados que dependem das diferentes partes do seu aplicativo possam ser armazenados e, quando estiver

25
00:01:58,070 --> 00:01:59,280
em um componente,

26
00:01:59,330 --> 00:02:03,740
você terá algo que deseja manipular esse estado, por exemplo, estamos definindo um

27
00:02:03,770 --> 00:02:10,610
filtro ou marcando uma refeição como favorita, então despachamos uma ação chamada, que é um pacote de informações predefinidas que

28
00:02:10,610 --> 00:02:15,840
você diria, tendo uma certa esquema que pode ser tratado pelo Redux conforme configurado por você.

29
00:02:15,860 --> 00:02:20,800
Essa ação alcança o chamado redutor e você escreverá esse redutor como desenvolvedor, para poder

30
00:02:20,810 --> 00:02:25,270
controlar que tipo de ação um redutor aceita, para que tipo de pacote de

31
00:02:26,060 --> 00:02:32,180
informações o seu redutor exige e o redutor recebe a ação e o redutor. deriva um novo estado com

32
00:02:32,480 --> 00:02:39,670
base no estado antigo que atualiza esse estado armazenado centralmente. Portanto, o redutor existe para atualizar

33
00:02:39,660 --> 00:02:42,500
o estado no final.

34
00:02:42,500 --> 00:02:48,080
E quando essa loja muda, quando o estado lá muda, você também pode ter assinaturas para essa loja

35
00:02:48,080 --> 00:02:53,050
de outros componentes, essas assinaturas serão acionadas quando sua loja, quando seu estado lá mudar e

36
00:02:53,090 --> 00:02:57,340
o estado atualizado for passado para os locais no seu aplicativo, para os

37
00:02:57,380 --> 00:03:01,040
componentes que estão interessados nessas alterações, por exemplo, esse componente aqui

38
00:03:01,040 --> 00:03:05,720
pode estar interessado em algumas atualizações. Bem, ele pode configurar uma assinatura e será

39
00:03:05,900 --> 00:03:08,190
informado sobre a atualização e obter

40
00:03:08,190 --> 00:03:14,130
o novo estado por meio de suas atualizações. adereços ou também com ganchos React, como você aprenderá neste módulo.

41
00:03:14,240 --> 00:03:19,620
É assim que o Redux funciona e essa é a ideia por trás do Redux.

42
00:03:19,700 --> 00:03:27,020
Agora, uma observação importante: se você está um pouco mais longe do React, provavelmente também conhece a API de contexto

43
00:03:27,050 --> 00:03:29,770
do React, que está embutida no React.

44
00:03:29,810 --> 00:03:36,980
Isso também pode ser usado para alguns bastidores e gerenciamento de dados, mas não é um bom substituto para todos os casos

45
00:03:36,980 --> 00:03:39,710
de uso em que você usa o Redux.

46
00:03:39,710 --> 00:03:45,160
Não vou me aprofundar nisso aqui, porque esse não é realmente um curso sobre as entradas e saídas de diferentes construções

47
00:03:45,170 --> 00:03:50,930
do React. Em vez disso, queremos aprender o React Native aqui, mas em anexo, você encontrará alguns recursos que o ajudarão nessa comparação

48
00:03:50,930 --> 00:03:58,030
entre a API do React Context e o Redux e quando usar qual. Neste módulo, usaremos o Redux, que é muito flexível, que

49
00:03:58,050 --> 00:04:02,490
definitivamente podemos usar, e mostrarei como configurá-lo com o React Native e como

50
00:04:02,490 --> 00:04:05,870
é claro que você pode trabalhar com ele.