1 00:00:02,290 --> 00:00:05,850 Para configurar o Redux, seguirei a mesma abordagem que fiz anteriormente no curso, adicionarei uma 2 00:00:05,950 --> 00:00:14,470 pasta da loja e, lá, terei meus locais de ação. arquivo js e meus lugares-redutor. arquivo js. 3 00:00:14,470 --> 00:00:16,310 É claro que é um 4 00:00:16,330 --> 00:00:19,310 pouco diferente do que antes, lá eu tinha uma subpasta 5 00:00:19,390 --> 00:00:21,520 de ações e redutores, você pode absolutamente 6 00:00:21,520 --> 00:00:25,950 fazer o mesmo aqui, já que eu tenho apenas uma ação e um redutor, vou 7 00:00:25,960 --> 00:00:27,820 manter isso em dois arquivos, mas você 8 00:00:27,820 --> 00:00:34,840 pode ter subpastas e assim por diante, isso depende totalmente de você. Agora, no redutor de locais, vou definir como meu estado deve parecer para 9 00:00:34,840 --> 00:00:37,990 essa parte do meu estado total e isso será muito 10 00:00:37,990 --> 00:00:43,510 simples, meu estado inicial aqui é apenas um objeto Javascript onde quero ter uma chave de locais vazia , uma 11 00:00:43,510 --> 00:00:47,810 matriz vazia no início, porque eu vou ter uma variedade de lugares e é isso. 12 00:00:47,830 --> 00:00:53,830 Portanto, aqui, eu posso exportar essa função redutora que assume um estado definido para o estado inicial, se nenhum 13 00:00:53,830 --> 00:00:54,190 outro 14 00:00:54,190 --> 00:01:01,450 estado for passado e uma ação e por enquanto, por enquanto, retornarei esse estado, logo é claro que vamos ' Adicionamos lógica para 15 00:01:01,450 --> 00:01:08,320 lidar com ações diferentes e, por exemplo, adicionamos um novo local. No arquivo de ações do local, exportarei uma nova 16 00:01:08,320 --> 00:01:16,890 constante, adicionar local, que é um identificador de ação necessário e adicionarei uma função de criador de ações, local, que deverá receber 17 00:01:16,890 --> 00:01:23,640 alguns dados sobre o local e para o momento, esse é apenas o título, mais tarde será mais 18 00:01:23,640 --> 00:01:26,290 e aqui eu quero retornar meu objeto 19 00:01:26,290 --> 00:01:28,420 de ação, em seguida, 20 00:01:28,420 --> 00:01:35,560 onde o tipo é adicionar local e onde apenas tenho meus dados de local, digamos que no momento, é 21 00:01:35,560 --> 00:01:41,200 claro, é composto apenas por o título, mas mais tarde novamente, isso será mais. 22 00:01:41,260 --> 00:01:43,630 Esse é o aplicativo básico do Redux, agora é claro no aplicativo. js 23 00:01:43,660 --> 00:01:50,670 precisamos conectar tudo. Então, como você aprendeu neste curso, podemos 24 00:01:51,280 --> 00:02:02,010 importar algo do Redux e também algo do React Redux e também importar o Redux Thunk do Redux Thunk; portanto, deste pacote 25 00:02:02,040 --> 00:02:05,160 também instalamos. Agora, no Redux, 26 00:02:05,160 --> 00:02:12,270 precisamos criar armazenamentos e combinações de redutores e também aplicar middleware para aplicar o Redux Thunk e o React 27 00:02:12,270 --> 00:02:15,210 Redux, precisamos desse componente de provedor e, com 28 00:02:15,690 --> 00:02:21,240 isso, assim como fizemos várias vezes no curso, podemos criar nosso redutor de raiz com 29 00:02:21,240 --> 00:02:23,120 a ajuda de redutores combinados. 30 00:02:23,130 --> 00:02:26,370 Isso pega um objeto no qual mesclamos todos os redutores 31 00:02:26,370 --> 00:02:33,090 juntos, agora obviamente temos apenas um redutor aqui e esse é o redutor de locais que importamos da pasta da 32 00:02:33,090 --> 00:02:37,140 loja e lá, é o arquivo do redutor de locais, mas é 33 00:02:37,140 --> 00:02:43,680 claro que você poderia ter mais redutores no aplicativo e mapeei isso para locais, para que o redutor de locais 34 00:02:43,710 --> 00:02:46,690 seja mapeado para o identificador de locais aqui. 35 00:02:46,890 --> 00:02:53,460 Agora, com isso, podemos criar nossa loja com a função create store e essa função pega o redutor de raiz e também 36 00:02:53,490 --> 00:03:00,300 podemos passar um segundo argumento em que chamamos aplicar middleware e passar o Redux Thunk para essa função, para que o pacote 37 00:03:00,330 --> 00:03:07,800 Redux Thunk seja gentil de conectado ao nosso fluxo Redux aqui. Com tudo isso configurado, podemos agrupar nosso navegador 38 00:03:07,800 --> 00:03:15,810 de locais com o componente provedor, porque todas as telas em nosso aplicativo, em nosso navegador, devem ter acesso à 39 00:03:15,810 --> 00:03:21,750 loja e ao provedor, passamos a loja pelo suporte da loja e esse é 40 00:03:21,750 --> 00:03:30,160 o Redux também vimos várias vezes ao longo deste curso. Com o Redux configurado, podemos ir para a nova tela de 41 00:03:30,160 --> 00:03:35,380 local e garantir que aqui no manipulador de salvar local acionado quando clicamos 42 00:03:35,380 --> 00:03:41,530 nesse botão, na verdade adicionamos um novo local que, no momento, consiste apenas em seu título, 43 00:03:41,530 --> 00:03:49,450 mas em curso, isso mudará ao longo deste curso. Para fazer isso, podemos importar o uso de dispatch do 44 00:03:50,730 --> 00:03:57,300 React Redux e simplesmente obter acesso à função de envio executando o uso de dispatch lá em 45 00:03:57,390 --> 00:04:03,930 cima e também, é claro, importar nossa ação, por exemplo, novamente, usando esta sintaxe de fusão de 46 00:04:04,380 --> 00:04:14,370 importação aqui, importando tudo como lugares ações da loja e de lá, o arquivo de ações de locais e, com isso, podemos salvar o manipulador de 47 00:04:14,370 --> 00:04:21,960 locais, chamar expedição aqui e enviar as ações de locais adicionar local e encaminhar o título, que obviamente é armazenado 48 00:04:21,960 --> 00:04:29,500 em nosso valor de título, portanto, aqui . Agora, com isso, poderemos despachar essa ação, no redutor 49 00:04:29,650 --> 00:04:32,170 de locais, agora podemos mudar 50 00:04:32,170 --> 00:04:44,400 nosso tipo de ação ou usar se verificações, é claro, e procurar o estado de adicionar local ou a ação que importamos das ações de locais, além de adicionar o 51 00:04:44,400 --> 00:04:50,400 caso padrão pela maneira em que retornamos o estado e, portanto, podemos nos livrar dessa 52 00:04:50,400 --> 00:04:56,160 declaração de retorno lá em baixo e agora, se adicionar lugar é o que 53 00:04:56,220 --> 00:04:57,240 obtivemos, então 54 00:04:57,930 --> 00:05:04,260 podemos criar um novo local aqui e por isso, também como Antes deste curso, adicionarei 55 00:05:04,260 --> 00:05:10,290 uma pasta de modelos com um local. arquivo js lá onde eu quero definir como um 56 00:05:10,290 --> 00:05:15,900 local deve se parecer neste aplicativo, simplesmente para ter uma maneira fácil de criar novos objetos de 57 00:05:15,900 --> 00:05:17,190 local sempre iguais. 58 00:05:17,190 --> 00:05:24,510 Então, aqui, eu vou criar uma classe e exportar isso como o arquivo padrão e agora, é claro, depende de você como você quer que 59 00:05:24,510 --> 00:05:30,180 seu lugar seja, definirei o meu com a ajuda do construtor para ter um ID e um title e 60 00:05:30,570 --> 00:05:31,460 mais tarde 61 00:05:31,530 --> 00:05:32,670 adicionaremos mais, mas, por 62 00:05:32,670 --> 00:05:34,020 enquanto, é isso e 63 00:05:34,230 --> 00:05:41,280 vou armazenar meu ID aqui e meu título aqui em uma propriedade. Com isso, temos um plano para novos 64 00:05:41,280 --> 00:05:45,390 locais, de volta ao redutor de locais, agora podemos 65 00:05:45,630 --> 00:05:46,440 usá-lo. 66 00:05:46,440 --> 00:05:55,170 Então, lá podemos importar o local da pasta de modelos e lá, o local. js e, em seguida, aqui, crie um novo local chamando um novo 67 00:05:55,170 --> 00:05:58,080 local. Inicializando ou instanciando um novo local com 68 00:05:58,080 --> 00:06:04,560 base em nossa classe e para o ID, por enquanto, usarei um ID fictício do carimbo de data 69 00:06:04,560 --> 00:06:12,050 e hora atuais e o No entanto, title é obviamente algo que podemos definir, porque isso faz parte da nossa ação. Lá, 70 00:06:12,060 --> 00:06:17,130 nos dados do local, teremos uma propriedade title que contém o título que o usuário 71 00:06:17,130 --> 00:06:18,720 definiu, então aqui eu 72 00:06:18,720 --> 00:06:24,630 posso definir isso como ação. placeData. título. 73 00:06:24,630 --> 00:06:26,530 Isso cria um novo objeto de 74 00:06:26,670 --> 00:06:33,600 local e agora podemos retornar um novo estado aqui onde locais e não preciso copiar o antigo estado porque não tenho mais 75 00:06:33,600 --> 00:06:39,480 nada no meu estado aqui e não adicionarei nada para que possa retornar um novo objeto de estado, onde 76 00:06:39,900 --> 00:06:44,020 places agora é state. locais. concat, de modo que pega 77 00:06:44,040 --> 00:06:49,710 a matriz antiga, adiciona um novo item e retorna uma nova matriz que substitui a antiga matriz 78 00:06:49,710 --> 00:06:51,050 aqui em nosso 79 00:06:51,300 --> 00:06:59,310 estado e concateno meu novo local, é claro. Com isso, devemos ter uma lista de lugares que gerenciamos. Na próxima palestra, agora podemos nos preocupar 80 00:06:59,310 --> 00:07:00,220 em exibir 81 00:07:00,240 --> 00:07:06,390 isso aqui na tela da lista de locais. Só mais uma coisa: quando adicionamos um novo 82 00:07:06,390 --> 00:07:09,310 local aqui, clicando no manipulador de salvar local, 83 00:07:09,390 --> 00:07:12,560 também quero voltar para a tela da lista 84 00:07:12,570 --> 00:07:20,610 de locais. Portanto, depois de despachar essa ação, na verdade, usarei a navegação de adereços para voltar, então para voltar à 85 00:07:20,610 --> 00:07:25,530 tela da lista de locais. E agora vamos trabalhar nessa tela de lista de locais e garantir que realmente 86 00:07:25,530 --> 00:07:26,760 apresentamos uma lista de locais lá.