Resumo do Transcript

Tá bom? Então aí já temos a list item que vai dar... Vários desses vão ser adicionados para list e essa list vai ser mostrada no app. Então agora o que a gente vai fazer? Eu acho que a gente devia... a gente pode seguir várias maneiras. Eu acho que a gente já pode começar a conectar essa lista com o Redux. Tá bom? Então o que eu vou fazer? Eu vou voltar para a lista aqui e eu quero conectar esses caras com o Redux para pegar a informação para cada list item do Redux em vez de ser só esse dummy. Então vamos criar uma pasta aqui no SRC. Criar a pasta chamada Actions. A gente vai pôr todos os nossos Actions Creators dentro desse index file aqui. E aqui eu vou criar um arquivo chamado index.js. Todos os Actions Creators vão ser armados e nados nesse arquivo, tá bom? Logo os Actions Creators aqui. Tá bom? Então o Action Creator, você coloca aqui e vamos criar uma outra pasta chamada Reducers para a gente colocar os Reducers. Reducers, vou criar um index. E... Esse aqui vai retornar todos os Reducers combinados, tá bom? Combinados, eu falo assim porque a gente vai fazer vários Reducers. Normalmente você tem... Você pode fazer tudo mesmo aqui, mas a gente quer... Quebrar isso em várias partes e ter, por exemplo... Nesse aplicativo só vai ter um Reducer, né? Vai ser o Reducer para a lista, né? Mas se fosse uma lista que dava para, sei lá, ter um formulário de adicionar item e essas coisas a gente tinha que fazer outro Reducer. Tem um Reducer para a lista, tem um Reducer para o formulário de adicionar novo item e assim por diante. Se tivesse outras informações, por exemplo, sei lá... Tem posts, tem também categorias, podia fazer um Reducer para categorias, essas coisas. Tá bom? Então esse arquivo vai ser para todos os Reducers. E antes de a gente fazer o Reducer e fazer o Action, deixa eu voltar aqui para o meu cara aqui. Então... Que o aplicativo vai ser componente List, né? Então quando a gente montar... Quando o componente List montar, o que a gente vai fazer? A gente vai ter que fazer um pedido HTTP para esse cara aqui para pegar essas informações, tá bom? E disponibilizar isso para a nossa lista. O jeito que a gente faz isso no Reducer vai ser assim, no Component Deadmount, por exemplo, ou Component Willmount, agora já estão falando que é melhor usar o Component Deadmount. A gente vai chamar o Action Creator. Fetch Post, por exemplo, que eu vou chamar ele. E esse Action Creator vai fazer o pedido HTTP. E depois que o pedido, a Promise, for resolvido, a gente retorna a Action e com a resposta. E essa Action vai ser dispachada para todos os Reducers, automaticamente, pelo Redux. Normalmente é usado pelo Dispatch, mas não precisa fazer diretamente. E o Reducer vai pegar o Reducer da lista, vai pegar isso, e vai adicionar a gente a resposta para a nossa lista no Application State. E essa lista vai ser rejetada, vai ter disponibilizado como Props para o componente. Tá bom? Vamos lá ver como é que é isso. Então eu estou aqui no List Item. List, vou voltar para o List, desculpa. Então List, vou voltar o Component Deadmount. Eu não estou usando Willmount, porque parece que agora o pessoal está recomendando usar Component Deadmount, em vez de Component Willmount, porque vai acontecer umas coisas com novos updates do React. Mas Google dá um busco aí para olhar. Por quê? Mas que usarsa funciona também. Vou dar um Component Deadmount, então quando eu fazer isso, a gente vai chamar Action Creator para pegar a lista, os dados da lista. Então comentar aqui para a gente ver o que eu vou fazer. Então o Action Creator normalmente vai ser rejetado via Props. Eu vou chamar o Action Creator de Fat Post, por isso que qualquer coisa que você quiser, tá bom? E depois que Fat Post vai botar todos os carros. Mas agora a gente não tem acesso a isso, porque a gente não conectou o Action Creators do Redux com o componente. E a gente nem definiu isso ainda no arquivo de Actions. Então o que eu vou fazer? Eu vou definir primeiro o Fat Post. Vamos aqui no Actions Index, eu vou definir esse Action Creator. Tudo que você precisa fazer é só isso. Eu vou dar um exportado ao mesmo tempo. Export. Fat Post. Função de Flasher. Assim. Desculpe. Errou aí. Então eu estou dando... Se não tivesse export, isso aqui só seria uma função, né? Função chamada Fat Post, que é função de Flasher, sem argumento. E retorna alguma coisa. Mas eu vou dar um export. Então quando eu importar, eu posso importar esses carros desse arquivo Index. O que vai acontecer quando eu dou export sem o default? É que vai criar um Fat Post, como se fosse a propriedade. E vai definir a função como o valor. Então se eu der, por exemplo, import. Fat. Se eu der assim, do outro arquivo, ele vai olhar no Index. Note que eu nem vou em Index porque já faz isso automaticamente, tá bom? Se o arquivo chamado Index não precisa pôr quando dá o import. Então do outro arquivo eu vou dar o import, o Fat Post, porque esse cara aqui é um objeto com vários valores. E o... Aqui, a chave é o nome da função do Action Creator. E o valor é a definição. E pode ter vários outros, por exemplo, Fat, Categories. E assim por diante. Por isso que eu não uso default aqui. Se eu usasse default, o que queria acontecer? Iria retornar a função. Em vez de ser esse objeto com vários pares de chave-valor, seria a função mesma, se eu tivesse o export default. Eu tinha que remover isso e já vai dar só esse cara, só dá para ter um. Tá bom? Se você quiser saber mais sobre isso, só dá uma busca. A diferença é que export default e senh o default. Então vai apagar tudo isso. Então aqui é o Action Creator, né? O que a gente vai fazer primeiro? Fazer, pedir o h2dp, obter todos os posts e depois... Enviar ou despachar... ...os dados do post. Tá bom? Então, se você se lembra que eu falei que o Action Creator retorna uma action. Então aqui no final a gente vai retornar a action. E sempre tem um tipo. E nesse caso vai ter um payload. Ainda não definiu o que é, mas é sempre assim. Nesse caso eu vou chamar fatPost, nome da ação do action. E payload vai ser a coisa que a gente obter do pedir o h2dp. Não sei ainda, né? Então... Para fazer o pedir o h2dp, eu não vou usar fat. Eu já tinha usado fat antes nos meus outros vídeos. Eu vou usar o chamado Axios. Já as torna muito popular. E é melhor que o fat, porque o fat tem umas coisas que acontecem. Quando dá erro, não vai dar no catch. Não vai para o catch e vai para o then. É uma coisa meio maluca. Se você vai dar uma busca, mas eu vou usar o Axios. Então, eu vou importar Axios. Mas a gente não tem esse módulo, tem que instalar, né? Então, vamos para o terminal instalar. Aqui na minha... Eu vou dar npm install. Dash da save. Axios, tá bom? Vou instalar o módulo Axios e vou salvar com minha dependência no package JSON. Dá para demorar um tempo aí. Mas eu vou te mostrar o package JSON aqui. As dependencies aqui, vai adicionar o Axios lá. Então, quando você der o npm install, depois, se estiver trabalhando com o projeto, primeiro vez, vai adicionar o Axios automaticamente. Tá aí, já temos Axios. Volta para a list. Oh, desculpa, index do actions. Tem um Axios. E o que a gente vai fazer? Vai dar um get e qual é o rl? Vamos para esse... Vou copiar esse negócio aqui. Vai ser assim, tá bom? Esse cara. Se quiser poder isso numa variável. Eu não vou pôr? Ou posso pôr, sei lá, não pôr. Vou chamar de... sei lá... Pode ser o request rl. E vou definir aqui, essa constante com a rl. Vai dar request rl. Tá bom? E eu... Eu quero demonstrar o... a string template, então vou remover isso aqui. Vou botar só o .com e aqui, eu vou demonstrar como usar o back tick para dar a interpolação de string. Então, esse cara é uma variável, então vou interpolar usando o $ com o curly braces. Então, o valor dessa variável vai ser substituído aqui. Note que eu estou usando o back tick. Acento grave, sei lá, como é que chama isso. Tá bom? Porque é diferente disso aqui e diferente desse aqui, tá bom? E vou botar barra post. Mesma coisa que tinha antes, né? Mas eu só para demonstrar usando esses aqui, cara, aqui. Então vou dar um pedido get e quando terminar, tem a response, né? Vou fazer alguma coisa. Vamos só dar um console log. Pra ver. E vou mover isso aqui dentro. Tá bom? Salvar. Conçou logo aí. Payload não tem nada. Vou pôr a response agora, mas não tá correto ainda, né? Talvez não esteja correto. Porque eu não sei o que está dentro do response. Provavelmente ponto data. Então vamos ver. Vou para a lista aqui, vou botar um semicolon. E do jeito que está agora, não está ligado com o Redux. Tem umas coisas que a gente tem que fazer primeiro dentro do app para poder disponibilizar o Redux, conectar o Redux React. E a gente vai fazer isso no próximo vídeo, tá bom?