Como criar aplicativo CRUD completo usando servidor falso Redux-thunk e JSON

1. Introdução: Olá pessoal, como está indo. Meu nome é Michelle e eu estou tendo mais de 50 anos de experiência de trabalho que Trenton e desenvolvedor em sua indústria de software. E hoje eu vou ensinar-lhe que como você pode integrar o leitor transformado em um aplicativo React e executar todas as operações de leitura com a ajuda de presentes e para sempre. Então vamos passar para o slide. Então, o que você vai aprender nesta pontuação. Então você estará construindo um aplicativo React a partir de sua crista. E nós estaremos construindo um componente React com a ajuda de material UI. E neste aplicativo Reagir através de ir para toda a operação atual com a ajuda de adjacente para sempre. E você não precisa escrever nenhum código de back-end para trabalhar com a API que é lida, excluída, atualizar e criar. Então absolutamente, geocodificação necessária para, para trabalhar com a API. Nesta aplicação. Também estamos usando para gerenciar o estado do aplicativo. E nós vamos usar um, um middleware redex para fazer uma solicitação de API com nosso JSON. Então, quais habilidades são necessárias para este curso? Então você deve ter uma compreensão básica de HTML aqui e JavaScript. Você também precisa de uma compreensão básica do ES6 e é bom ter algum tipo de conhecimento React. Mas de qualquer forma, vou explicar tudo do zero se você não sabe nada sobre o ato. E também é bom ter um pouco de compreensão sobre o Redox. Mas novamente, vou explicar tudo do zero. E você não precisa de nenhuma experiência necessária trabalhando com o servidor JSON. Agora, o que é esfria e tecnologia que vamos usar neste projeto. Então você deve ter um código do Visual Studio para escrever todo o código relacionado ao reagente, um redex. E em cima disso, você deve ter Node instalado em seu sistema. E uma vez instalado esse nó, você terá acesso ao NPM. De modo que, com a ajuda do npm, vamos instalar algumas dependências em nosso projeto. Porque projeto de arte também vai apoiar o dom roteador reagir. E vamos instalar esta dependência, tanque redox x aqui, material, UI, e roteador React, dom também, e Aks, sim. Se você não está ciente de excesso, excesso é ajudar-nos a fazer o HTTP 2 um e material. Você, eu já disse onde o início que vamos construir um componente nesta aplicação com a ajuda do material USO. E nós vamos basicamente, ele está escrevendo neste, neste curso. Então é por isso que eu usei UI material. Então vamos demostrar o aplicativo. Então, vamos executar todas as operações de leitura uma a uma com um pedaço e adjacente, entanto, em nossa aplicação React. Então vamos explorar cada operação de leitura um por um. Então indique a operação mais alta. Consciente sou capaz de carregar todo o orçamento da UE a partir do servidor JSON. E nós também estamos adicionando o sotaque que você pode ver que estamos adicionando a coleta de dados, esquecer todos os dados aqui do servidor. Agora nós estamos indo para executar a segunda operação chamada período adicionando o, você entrar no lado adjacente de a. Então eu vou dar ou seja mudança em. E então eu li gmail.com algo número de contato aleatório e endereço será uma falha. E vou admitir isso em detalhes. E eu vou obter tabela atualizada aqui com os dados atualizados e. Então temos também sobre a operação de criação como, como adicionar a UE entrar no adjacente para sempre. Agora, a próxima operação é excluir o usuário. Então eu vou deletar este olá. Agora, também somos capazes de fazer a excluir os dados da tabela e ler um texto e também ser contratado, a fim de excluir um item da tabela. A próxima coisa é ao vivo para atualizar os detalhes. Então eu vou clicar na atualização e eu vou pousar na casa dos idiotas, ok? E eu vou apenas atualizar o nome aqui e apenas clicar em nossa dívida por enquanto. Nós também somos capazes de sobre a operação de atualização com as injeções de Harvard e lá você teria tempo. Então eu devo a você toda a funcionalidade com o porto GFF e um leitor. 2. Entenda Redux, Redux-thunk e seu diagrama de fluxo: Então, pessoal, antes eu queria começar a escrever qualquer código no React, e só queria dar-lhes uma visão geral do leitor. Então, o que é um redox? O Redox? É previsível, é bom e tenor, ou um aplicativo JavaScript, é basicamente gerenciar todo o seu aplicativo, o estado, e é comumente usado com uma biblioteca chamada React ou Angular snow, três princípios seguidos por um leitor que é única fonte de verdade é declarado apenas leitura. E quaisquer alterações que fizemos em cada estado, Usamos sua função e este é o componente de x e o redutor é para ver. Então, a fim de atualizar o redutor de estatinas, nós criamos acíclicos uma ação. E a ação é despachado do componente e é armazenado basicamente manter todo o estado do aplicativo. E a visão não é nada além do nosso componente React. Então agora vamos entender o que é um redox. Então leia f, obrigado. O middleware que permite chamar um criador de acentos que retornam uma função é em vez de objeto de ação. E essa função receberá o método de despacho de armazenamento, que é então usado para despachar ação síncrona regular dentro de um corpo de função se a operação assíncrona tivesse sido concluída. Então, por que preciso desta vez? Porque o middleware estende a disponibilidade na loja e permite que você escreva uma lógica que interaja com a loja. Então, qual é o pivô aqui? Então, um tanque, outro que parte da função, mas não é qualquer função antiga. É um nome especial para uma função que é retornada por outra. E assim você terá mais compreensão sobre o tanque ou uma vez que começamos a escrever o código em nossa aplicação. Então vamos entender o diagrama de fluxo de redox geral. Então pessoal, este diagrama de fluxo de dados, e você pode ver isso aqui. Então aqui você pode ver que em, no abaixo, temos um componente. Um componente é um despacho de uma ação. E aqui a ação não tem nenhuma lógica para atualizar o termo. E é apenas agir como um mensageiro. Então é um alcance em direção ao middleware. Mas aqui, o meio vários opcional e middleware poderia ser qualquer coisa como Hancock, saga. E neste curso estamos usando língua redex. Em seguida, ele chegou onde o redutor e atualizar o escapou. Então redutor basicamente substituiu a data mais antiga com o novo estado. A turnê de imagem imutável. Então temos ainda centerline é virar onde armazenamos toda a propriedade do aplicativo e da loja passado o estado atualizado como os refs que o queixoso. Então, 1 quinto depois de atualizado, se isso esfregar seu gatilho, a re-renderização de seus componentes de interface do usuário. Assim, o componente irá notar o conteúdo do titular com o estado atualizado ou L0. Então eles dizem o conceito geral de redex e seu diagrama de fluxo. E eu espero que você entenda esse conceito de redox e você entenda o diagrama de fluxo também. E no próximo vídeo, vamos reagir projeto, a fim de começar a trabalhar nesta aplicação. 3. Configurando o projeto react: Vou usar a interface do usuário material para enterrar este botão Home do cabo. Então, vamos trabalhar com material UI e você também tem que instalar Jenkins chefe de um globalmente. Então, espero que esteja ciente do seu lado. Por isso, forneceu escolher uma taxa APA e sem codificação. Então você não precisa, então você não precisa escrever nenhum código para executar as injeções para sempre. Você só tem que procurar tudo de novo. Então você tem todos os diferentes npm instalar menos g, JSON iRobot. Então deixe-me começar a criar o aplicativo. Então eu vou para o meu diretório e vou abrir esta parafernália caótica. E eu vou pegar a inscrição. Então eu vou dar o nome da obrigação e campo de texto. E o nome do aplicativo será muito ator JSON que Rudolf, o nome da obrigação federal. Então vai levar algum tempo para instalar todas as dependências e eu vou estar de volta uma vez toda a dependência se pode ser desinstalado. Então pessoal, estou de volta e parece que tudo dependente está instalado. 4. Instale pacotes e JSON Server: Então, antes de fazer o npm é eu vou instalar alguns pacotes. Então vamos para a pasta do projeto que eu criei, como UD, reagir j, em seguida, ler. E antes de fazer n timess começar, eu vou armazená-lo. Eu recebo aqui como React Redux. Então eu preciso construir este aplicativo. Agora, apressei-me. Em seguida, redigido lava tanque pesado. Então precisamos de material nos com o componente em nosso projeto. Até agora, esta quantidade de pacotes necessários em nossa aplicação para construir um aplicativo de propagação inteiro em um reagir com j de Harvard. Eu li f vezes middleware. Vamos esperar pela instalação. O pacote está instalado. Agora, vocês também têm que instalar este JSON Carver. Então eu já instalei o servidor JSON na minha máquina. Então eu estou apenas mostrando a vocês como instalar o JDK na máquina. Então você tem que fazer isso. Você tem tinta na injeção no entanto evidência. Então vamos esperar pela instalação do pacote. E eu abri um projeto em VS Code também. Assim, a década aberta em VS placa adder. 5. Configurando o servidor JSON no React: Agora precisamos criar uma variável para melhor db.json militar trabalhar com o JSON Haraway. E não aqui. Vamos apagar isto. Precisamos criar um arquivo aqui. Ele será db dot JSON e mais um arquivo, ponto arquivo ENV. Então vamos obter o add-on também, dot arquivo ENV. Mas com a Itália nos dizem a API aqui. E você não quer este, sem título. Agora, vamos começar o desenvolvimento React, uma espécie de curva de malha. Você está no diretório. Algo está errado por reagir. Mas eles pegam o nome da pasta. E eu vou fazer e Tim estrela. E enquanto isso, no dia que começa, vou adicionar um aqui. Para começar em Jacob para sempre. Vou adicionar um derivado de carbono aqui. Então, dentro de um, dentro desse aplicativo Start é um começo. Então vamos para o código VS e adicionar o script aqui. Embora ele será assistir arquivo db.json. Eles atingiram o hilo, que temos em dado aqui. E será executado na quadra. Eu 100 de novo. E eu só vou colá-los e a guia de mídia aqui. Então eles dizem que os dados fictícios, eu estou apenas editando em vez disso o arquivo David e JSON. Então nós temos um registro re aqui, ok, em nosso db.json, você também pode ler os dados no asic navegador. Então, a fim de ler os dados no navegador, você tem que executar a altura de um, que nós adicionamos agora. Então eu vou aqui e eu vou correr o NPM correr fora de nós. E você pode ver que o nosso hardware em execução neste URL. Então eu vou apenas copiar este URL. E eu vou entrar no abraço e colá-lo aqui. Então isso é mais útil agora. Mas você pode ver o que quer que os dados estão lá em nosso ponto de banco de dados. Eu estou carregando no navegador como ele. E você também pode ler os dados mentir se eles falsificar ID. Então você também pode fazer isso. 6. Crie estrutura de pasta: Então vamos começar a trabalhar no aplicativo. Então eu vou para o meu VS Code e eu vou adicionar um pouco mais velho ainda. Então eu vou ter as páginas. Então. Eu vou ter quatro soltos. E você diz as páginas. E eu vou ter mais uma pasta chamada Redox. 7. Configure o Redux e o Router: Então vamos fazer isso. E você levanta. Em nossa obrigação. Vou criar algum arquivo aqui, Node.js e ação aqui. E então dot js. Em seguida, haverá um nó raiz. E no último é o dedo um pouco maior. Então, primeiro, precisamos dirigir a loja. Então eu importaria algumas coisas dos dados, realizaria em profundidade. Então, vamos importar do redex, criar, armazenar, aplicar middleware. E então a próxima coisa, nós vamos importar o madeireiro, madeireiro. Logger para arrastar basicamente o estado do aplicativo. E o próximo estado. Então precisamos importar. E você sabe, nós também precisamos de leitura de raiz. Diga o nosso, vamos importar a rubrica, que temos que definir ainda. Agora. Vamos ter, middleware, middlewares. E dentro dela vou colocá-los todos os dias. Agora. Vou verificar no processo JK, processo, processo, ponto a e a, guarda AN a e B, que para Nebulosa. E depois para esta lava para a área. Agora eu realmente vou empurrar madeireiro. Agora. Definido a loja, seu armazenamento, mas ele irá criar uma loja. Você reduziria. Aplicando middleware. Middleware no padrão Ford, desculpe, exportar armazenamento padrão. Agora, vamos voltar para o redutor de raiz. Então precisamos das leituras que eu mais cedo. Mas vamos primeiro definir o estado inicial básico do redutor. Vá. Aqui vai, você vai nos ajudar em cada pílula. Estou exigindo o pedido inicial. Então seria como Yuja. Então vamos ter um monte de YuJa e também estará trabalhando com o ângulo que você. Tão solteira geralmente será apenas em um objeto e haverá mais uma perna carregando. Então será falso. E eu vou passar raiz, não rotor. Dê um nome como o seu. Reduza. Ok. Não. Vou usar a função de seta ainda. E eu vou atribuir isso ao estado inicial, será uma ação. Para trás do palco. E adicione isso agora, eu vou apenas retornar, o padrão está morto. Acho que é complexo agora. E eu vou exportar usuário padrão. Agora. Eu vou para a raiz. E aqui vou combinar os três, reduzi-lo da profundidade. Então eu estou importando o combinado e ele está lá. Então eu vou definir as classificações de estrada e fazer hoje dizer experimental combinado leitura Sara. E eu vou, fornecendo a chave aqui, usuário para acessar. Assuma a liderança por uma hora, você reduzi-la também. Então sim, ele disse, e eu estou adicionando a eugenia para o editor UV está aqui. Então, com a ajuda de você obter p eu vou ser capaz de agir como a tabela de página dos dados é armazenado. Então deixe a porta, não reduza m. Agora temos rotor para dizer que aqui é importante em uma loja. E deixe-me ir ao índice, não no arquivo JS. Então, no arquivo index.js, precisávamos provedor no livro React fornecido diretamente para postar para basicamente fornecer o estado geral do aplicativo. Então, dessa forma, usamos provedor para esse aplicativo pode acessar um armazenamento de estado para que pelo seu nome. Como provedores, embora ele está fornecendo o aplicativo é adaptado para todo o nosso aplicativo React e é armazenado. Agora, vamos precisar de um roteador de navegador, bem como para ter o aplicativo de roteamento todos os dias em nossas obrigações. Então eu também vou importante de Reagir roteador ponto I e eu acho que não instalou o ponto roteador reagir o. deixar todo esse pacote, NPM instalar Reagir roteador, dom. Então eu esqueci de instalar o convidado Skype. Então, enquanto isso está instalando, Eu vou apenas importar roteador React em tudo. E o pacote será, eu estou na comparabilidade, o roteador do navegador. E novamente, eu vou envolver o aplicativo com eles O outro fora com o nosso aplicativo agora tem a capacidade de roteamento. Sim. Agora, nós fornecemos uma rota e uma loja em nossa aplicação. 8. Trabalhando com tabela em casa: Então deixe-me começar a largura PDF aqui, embora eu vou carregá-lo homepage Feist, o home.html. E usarei trechos reativos para gerar um n-bit. Então, se você não está, se você não está ciente disso como trechos. Então você pode instalar essa tensão ou reator redex e grok, mesmo que isso tenha ajudado a gerar um snippet. Então eu estou usando aquele texto que eu posso enviar no meu código VS. Então vamos dar qualquer um. Não é só tudo. E eu vou registrar essa rota aqui em nosso arquivo app.js. Eu vou mover essas coisas e eu vou importar Reagir roteador dom, Vou importar Reagir não só coisa, há algum problema. Então acho que não o guarda neste parque. Então, na verdade, por engano, ele é armazenado em R, então nós temos que ir para esta pasta. Então eu posso ir para dentro desta pasta. Você reage. Sim. Mas você teria e agora eu vou instalar o final todos reagir roteador para baixo. Certifique-se de que você está nessa pasta para instalar a independência adicional. Embora. Enquanto isso, vou importar switch e rota. Eu vou usar arremesso. Então o fora, deixe um ato. E eu vou dar o caminho que estou agora em casa. E o componente será o lar. Então é importado automaticamente. Vf Corp hidrogênio quilômetro ou para importar. Então vamos esperar que a iteração exagere auto Dom instalado em nossa obrigação. Então vamos entrar no navegador e atualizar. Agora, somos capazes de carregar a página inicial. Embora a partir de agora, o que é que eu estou indo para referir a interface do usuário material a fim de construir as tabelas em nossa aplicação. Então eu vou apenas para o componente aqui e apenas descobrir onde uma tabela de estoque deve estar na exibição de dados. - Sim. Então aqui está a tabela e eu estou usando esta tabela. Vou mostrar-lhe usando esta mesa. Então, cinco vezes serão todos esses. Então vocês também abram este link e copiam toda essa história. E eu vou colar no meu código VS. Então essa é a nossa casa. Então eu atualizei todo o arquivo, sim, quero dizer toda a importação. Agora. Também preciso de tudo o que preciso. Então vou chamar o pico. Vou copiar tudo isso agora. Então vamos para a página inicial. Eu não tenho que copiar ser contratado aqui. Vou copiar isto para fora do componente. Ok, então eu tenho óleo de papoula, esta coisa fora componente de cabeçalho. E então eu vou copiar tudo isso. Então certifique-se de que você também está aparecendo comigo. Então, sim, estou sendo uma coisa relacionada. Então Paige gravou o VS Code. Bem, eu vou colar isso aí e somar, não, eu não tenho os dados brutos. Então vou comentar este. E eu aplico alguma mina styling em meu próprio ladrilhos. Então eu te dei uma média com 900 e margem superior jogo poder de barganha, um 100. De repente, styling e dando o meu próprio e temos que copiar a empresa tem, a fim de aplicar o estilo. Sim. - Não. Então, e agora eu acabei de deixá-lo. E e apenas p e, em seguida, a URL onde somos capazes de ver a tabela ou não. Então, somos capazes de ver que eles têm um monte de dinheiro para excluir linha. No nosso caso. O que temos não temos um dia sem realmente ter nome. Em seguida, ele entrará em contato e, em seguida, nome , e-mail, endereço e o último. E aqui estamos nós tendo uma ação. E tudo deve ser a linha padrão. Então, eu só estou te dando um centro. E vamos para o navegador. Então agora temos um título apropriado na mesa. E agora para obter os dados, embora inicialmente já tenhamos dados e seu arquivo db.json, mas precisamos dos dados na tabela. 9. Escrevendo nossa primeira ação e redutor no Redux para obter dados de usuários do JSON Server: Vamos escrever uma facção e redigir. Então eu vou estar dando o tipo de lata de cinzas aqui. Novamente. Você só está bem. E agora venha, venha trabalhar aqui no arquivo de inações. Importarei tempos. Eu posso digitar e eu vou dar um. Normalmente aqui, vou definir o que é uma ação aqui. Obtenha usuários. E D se você normalmente terá habitável. Por conseguinte, esta acção terá como argumento o orçamento da UE. E agora vamos escrever um dividendo em taxa de tecnologia ou, na verdade, um pouco de tipos. E, em seguida, digite dot. E a carga será você. Sim. Ok. É o que dizem o sotaque. Agora, temos que escrever uma expansão de sotaque como a carga ao vivo. Você só e ele vai ser exportação realmente indo para o custo mais baixo fazer sim. Então, antes de escrever o dispatcher de acento, mas certifique-se de ter adicionado APA. Sim. Primeiro, vou adicionar a APA React App API. E a API será esta. Ok? Então, nesta API precisamos aqui. E, portanto, eu atualizei o ambiente altamente. Então preciso começar com Herbert Eye. Vou passar por este nó. Ensinei que o desenvolvimento tinha cerca e realmente aproveite essa coisa que temos que fazer se você estiver trabalhando com a variável de ambiente. Agora, venha para o taxane. E enquanto isso eu vou estar escrevendo o acidente em uma função de tempo. Então está abrindo no navegador. Então, enquanto isso eu vou apenas escrever a imagem porque vai levar algum tempo para carregar no navegador. E precisamos desse kit também. Então, se eu colocar as crianças, eu estou importando os Aks. Sim. Agora, vamos vir aqui e fazer X. Sim, eu fiz. E aqui eu vou estar usando processo e, ou T e V dot PNG API. Depois disso, eu vou fazer no, então deixe ser que como bar. E depois disso, eu desertarei e a ação será lançada. Obtê-lo como dados POME. E eu também colocaria um log de console ainda que podemos tomar se somos capazes de obter os dados do get-go, no entanto não são. E se você tiver algum ar, então nós vamos pegar aqui. E por muito tempo, não se dirigiu. Então, agora venha a este arquivo. E aqui eu vou adicionar o tipo K. Mas também precisamos importar os tipos aqui. Então eu só copio este. E eu vou colar aqui. E os tipos ponto chegar a ainda. E em troca, vou espalhar o estado. E o estado estará em Chandon carga útil e valor inicial, será o azul. Agora. Será falso inchaço. 10. Enviando uma ação para obter dados de usuários na tabela: Então temos que montar a ação para despachar. Agora, vamos para a página inicial. Mas isto na página inicial. E daqui vamos despachar e eu posso então vamos trazer de React Redux. U é selecionado. E você fez pais, no entanto. Estou importando o silício dos EUA e o pessoal da USDA. E, e rebentar este caminho e acção. E p, se somos capazes armazenar o usuário pode fazer cauda para o leitor com que não são. Bem, eu vou mantê-lo em uma variável de despacho. E eu vou usar um efeito enorme aqui. Tão importante para você na feira, então isso é realmente prevalente. Normalmente, faça uma chamada de API. Mapeou. E aqui estamos de volta para despachar YuJa mais baixo. Então, se nós ações automaticamente identificar-me embora eu mesa importante e também certifique-se de que é importante como o topo. Então, sim, o importador, você abaixa o usuário. Então temos este teste, o Senhor. Agora estamos no navegador. Basta substituir o aplicativo. E mesmo no próximo semestre, se somos capazes de continuar a contar ao nosso narcótico. E aqui estamos recebendo todo o usuário que temos em nosso arquivo db.json. Então este é o arquivo db.json e todos os dados agora, que temos em nossa carta você diz? Então vamos mostrar todos os detalhes aqui. Então o que eu vou fazer, pegar o estado na loja. Eu tenho duas unidades, um grande seletor dentro do componente doméstico. Então eu vou ser estrutura e eu vou usar a era sanitária. E o estado é tomar a Artesia abaixo como você pode diluir a raiz reduzida e o agente redutor. Adicionando a chave aqui. Então eu vou usá-los. Usuário do Ted Dot. E a partir do data.txt, eu vou estruturar os usuários. Então espero que não faça país e esforço para fazer desemparelhado. Então eu só vou mudar essa. Então, eu só estou fazendo os dados ainda, se você tiver alguma confusão. Então agora o que eu vou fazer todos os anos puja é tf.data e todas as famílias, Ted Dot Data, eu vou descrever para vocês, sim. Então aqui eu vou dar textura. E aqui o que eu vou fazer, eu vou apenas comentar e descomentar. E eu vou fazer você vai ter e você apenas vai, nós não temos nenhuma era fazendo a coisa. Então, eu vou mudar tudo ainda. Então vai ser espremedor. Para a chave. Estou dando um nome de ponto rho nada como user.name arrumado que estou dando aqui. E aqui estou eu dando nome ao usuário ponto, ponto, o que temos? E então eu posso ligar para ele. Temos e-mail, mas temos que mapear tudo. E aqui será o contato, e aqui parecerá a âncora. E aqui nós temos que basicamente adicionar o botão para realmente, bem, eu vou à esquerda como eu sei. E este vai ter um grande sucesso. E também certifique-se de que o alinhamento é 1010 e todos os dados e entrar. Então vamos para o navegador. Recarregar. Agora somos capazes de carregar todos os dados na tabela da loja. 11. Como adicionar o botão Apagar e editar botão na tabela: Então, a próxima operação que vamos executar, excluir n. Para isso, temos que somar por 10, a fim de adicionar o botão. E eu estou indo novamente para a nossa interface de usuário material, e eu vou olhar para fora para as entradas de botão. Então esta é a entrada do botão. E, e eu vou usar este botão, ok? Então eu estou realmente indo para apertar o grupo de botões na verdade, então eu vou usar este aqui. Vou só copiar. E eu vou para o código VM. E basta colar. E deixe-me remover este. E nós demos este, apagar. E fez. E vou remover a cor do primário aqui. A Primária será como esta, e esta será o segundo dia. Bem, estou dando o segundo cérebro. Eu e nós também precisamos importar o grupo de botões. Então vou abrir tudo. E eu importarei essas duas coisas. Então eu vou apenas copiar e eu vou colocar aqui. E também precisamos deu seu estilo. Ok. Então vamos copiar isso e colá-lo no topo. E enorme contagem já tomada. Então eu vou dar aqui, usar uma telha botânica. E preciso deste azulejo botânico e do fundo. Então aqui eu preciso meus pequenos azulejos e uso, mas a qualquer hora. E agora vou usar este estilo de botão. E terceiro, sim. Vamos entrar novamente em como eles te pegaram. Então eles adicionaram um dia via Eu vou apenas copiar os arquivos. E acho que feche isso de novo aqui. E não temos classe ou mesa onde temos azulejos butaneses. E temos algum problema. Então vamos para a exibição. E nós temos eu acho que nós importamos reagir duas vezes. Sim, então sim, você conhece um importante. Agora, vá para o navegador. Agora temos nosso deletar qualquer beta1. E a próxima coisa que vamos fazer é e também fornecer algum espaço no meio. Mas eu sou, então é bom ter alguma diferença entre diferentes, mas eu sei o que eu vou fazer. Eu não vou escrever nenhum arquivo CIMP Tailândia. Estou disposto a fornecer o estilo inline. Será como de I para J. e i. E eu vou dar meu pixel que podemos ter algum espaço. Sim, agora temos o espaço. 12. Trabalhando em Apagar ação e redutor: Então agora nós colocamos sobre a operação de exclusão. Então vamos novamente escrever o tipo de sotaque. horário vintage será excluído filas, sim, estamos excluindo. Um sindicato fará com que apague um UGA. E eu vou ligar para o carisma. E eu vou para os sotaques. E eu vou apenas copiar este por causa da fidelidade falar mais sobre aquela coisa vai adicioná-lo a esta equação, um comprimento de cadeia do portão para apagar. E ele receberá o ID. Vou mudar o nome e apagá-lo lá. Ele irá adicionar alguns ID, Eu vou adicionar o ID aqui. E prevejo que ações diferentes por vez. Então vamos fornecer a ação que o usuário excluiu. Está bem? Então, não terá nenhum argumento. Ação com um tipo, um tipo exclui. Então, vou adiar essa. Exclua qualquer um. Não matar você também. - Sim. Quero dizer, você então deleta. Você viveu deletado. Agora, vá em direção a um redutor. E aqui vamos adicionar este caso. Então ele vai ser muito kf cozimento aqui. Excluir e apenas obtê-lo feito em vez disso e fazer as barras de carregamento. Então temos feito com a ação de exclusão. 13. Ação de envio para remover dados do usuário da tabela: Agora venha para a página inicial e aperte o delete one. Então o que eu vou fazer, eu vou escrever um onclick. E ao clicar teremos um identificador, excluir métodos. E deletar. E a morte será o estacionamento da identidade, usuário. Identificação. Agora criado este manipulador fora que retornam a criar o arquivo. E vai derrotar a identificação. E, e eu vou deixá-lo inclinado, fornecer uma janela. E fórmulas se você hey, deletando isso. Então eu só queria avisar o usuário miticamente. Mas de qualquer maneira, eu queria remover você que quando a fatura não estiver aqui, eu vou fornecer à janela uma caixa de diálogo de aviso, e ela terá um método colocado sobre. Você deseja excluir o inverso. Então, podemos gerar a caixa de diálogo usando a barra window.com e e podemos dar um lago ou um compartilhado. Você tem certeza que queria excluir o ano, então? O mapa de dados é e clique em Ok, em seguida, ele vai entreter que se condição e encontrado lá, Eu vou despachar excluir você o e diluir audição automaticamente importado do Código VS. Você pode ver no topo, VS Code está me batendo no meu quadro MDF. Então deixe o caminho se Id não anos. Então eu acho que erroneamente, você teria o cabo negociando fora do componente. Não precisamos criar o componente externo. Precisamos criar o componente intacto. Basicamente fora do retorno. Sim. Aqui é o Ted. E precisamos passar a identificação. E uma coisa garante isso na ação. Para uma vez que você exclua, você também precisa dos dados atualizados do GitHub. Então aqui estou novamente indo para despachar a carga YuJa, a fim de obter os dados atualizados do JSON P onde quer que esteja funcionando ou não. Então eu vou excluir o último registro, excluir, e eu vou clicar em OK em relação à nossa exclusão. Então, não há problema. Agora temos problemas com isso pode amarrar. Então está tudo bem aqui. Ok. Eu tenho labirinto aqui, FlatMap, isso não é deletar. Então vamos tentar mais uma vez. Então, novamente, vou excluir o último registro. E agora somos capazes de excluir o registro. Temos de toda a operação de leitura e eliminação operação usando NADH e FADH sobre n. cada deck. 14. Trabalhando em componentes de formulário: Então, a próxima coisa que vamos trabalhar no componente de formulário. Então, a fim de trabalhar no componente de formulário, temos que adicionar um no topo para adicionar o usuário. Então vamos adicionar o botão. Então eu vou para o componente de casa. Mão aqui. E vamos adicionar um botão. Aqui, estou pegando o botão. E então nós covariantes. Só vou copiar um botão. Na verdade, eles foram WO vai apenas copiar este e apenas colá-lo aqui. E será uma variante. Variante contida e irritada. E será o nome da perna você lá. E eu vou colocar isso em batalhão em um dia porque eu preciso aplicar um nome de classe aqui. Então, estou pintando no div. E o nome da classe não será o nome da classe de estilo. Então, temos telhado de telha de botão. Então vamos ver no navegador. Então agora estamos recebendo o anúncio você que ao longo do tempo. Então, clique em Obter rota de dados. Então o que eu vou fazer, eu vou trazer a imagem h3 do roteador reagir dom 0. Ele será usado h3 e virá abaixo. E se você reter a variável t, árvore enorme. E exatamente o que você tem que fazer no clique, hey, x3, dot push. Então eu vou empurrar em direção à torre para seguir esta rota. Se não, teste. Então, vamos adicionar esta rota. Então aqui em app.js, por período a página em você, eles não são ds. E basta criar dados transmitidos a partir de agora. O total relacionar que anúncio você lá. E eu não cheguei a essa rota aqui. E eu vou fornecer esse nome como adicionar usuário. E o compressível que adicionamos Egito, por isso importado automaticamente no meu VS Code. E agora e basta clicar no ADA você que agora somos capazes de mover Adi pagar, em seguida, e há paralisação também ficando cadeia. Então vamos começar a trabalhar na área Adicionar, embora aqui temos que trabalhar com a queda. Mas novamente, eu vou para a interface do usuário material e eu vou usar o campo de texto. Então este é o campo de texto muito básico. Eu vou dizer isso, este eu vou para você. Então acho que tem sido bom. Abra também todo esse código-fonte. Vamos importar essas duas coisas. Neste ano superior, a partir de agora. E agora o que temos para copiar. Talvez tenha que copiar essas coisas. E basta colar aqui dentro e remover os dois primeiros. Mas só precisa e também copie esta gravata. Sim, eu tenho uma cópia. E aqui estou eu onde você pode criar uma largura por, mas e se eu bater, ok, agora de 25 a 45, ruim. E dado isso com Vamos lá conferir. Então, estamos recebendo o apropriado. Página inicial de entrada. Está bem. Oh, vamos adicionar outras entradas. Will pai foi, Oh, eu só vou copiar Apala ou tempo porque lá e eu vou fornecer algum valor aqui de, vamos tentar encontrar um estado da aplicação. Então precisamos fornecer o valor para o campo de entrada também. Então eu preciso de você em vez disso. E eu vou definir o estado aqui. Indique o bife que você listou e o que valorizamos nome atrasado, e-mail e, em seguida, entre em contato. E então tivemos ótimo. Então tudo está bem agora. E imediatamente eu vou conseguir, mas não temos que escrever como head.next test.html no valor. Nome, e-mail no convés, endereço. Agora, o valor será nomeado aqui. E o rótulo vamos mudar o nome das pistas. E eu estarei lá. E vamos dar um tempo. Agora. E mais cérebro aqui. Aqui. E aqui eu vou ampliar, em MPF e aqui. E sim, guarde essas duas coisas. Será que será um e-mail. Sim, então vamos nos envolver e este para enviar um e-mail. E o e-mail e a etiqueta serão agora contentes. O valor será o contato. E esse será o número. E este será o endereço. E o valioso V. Drift será o texto. E deixe a raiva, mas uma média. Então, suponho que copie um botão daqui. Vamos copiar e colar aqui. Então não precisamos do Onclick. Pode até digitar, mas tipo milímetros cúpula. E para colaborar com variante oportuna e o bloco será tão importante na verdade, não estamos nos deixando ideação para botões menos importantes agora, sim, declaração de importação cooperativa. E eu vou colá-lo aqui. Então, a declaração é pintada. E vamos dar um título aqui. Então estilo basicamente nós só queremos adicionar apenas um pouco do botão. Então, será o 100 pixel. E, e apenas dar-lhe o nome vai ser algum pescoço. Então, um pouco dele. E a próxima coisa que vamos fazer perna. Vamos ao médico. Estamos recebendo o formulário aqui. Agora. O que poderíamos fazer, poderíamos fazer um pouco de estilo aqui. Vamos obter alguma margem no topo. Então eu vou adicionar margem de conversa. E eu vou dar calma. Eu não tenho nenhum show ainda está queimado para o Rajah. Sim, agora, vou dar um título. Então aqui precisamos de um título, colocar adicionar usuário. Certo, então o rumo morto. E precisamos e precisamos também de um botão. Então, se você quiser voltar, eu vou copiar esse botão. Então vamos copiar diferem. Vou copiar a coisa toda e vou colá-la. E esta roda de cores com um secundário. Então eu estou dando secundário. Cidade de marketing moderna será margem. Top, será filme épico. E vai ficar tema. E no onclick, vamos mudar o nome do botão ágil. E onclick. Voltaremos para a página inicial. Então temos que trazer aqui é do roteador reagir para baixo. Vamos conter dia é reagir dom roteador, enorme HJ, e restaurar as três variáveis. E história. Bem, você mantém o histórico de variáveis. E eu vou apenas mudá-lo em torno, como história, história, ponto push, e apenas remover o tipo dele. Mas não faça lâmina vezes 100, temos baixo, não temos nenhum show. Bem, vamos para o navegador e verificar. Sim. Agora, volte. Então está funcionando. Então vamos começar botão sob funcionalidade, cada falha de entrada terá o onchange e assim por diante. Você pode fazer um íon definido aqui? Exigirei esta declaração fora da grelha. E mudança de entrada. E isso será, ele vai FEV. E eu vou capturar o alvo lambda e dot. E esse alvo, eu preciso de nome e valor e eu vou definir o estado, estado, nome. E assim, em cada pressionamento de tecla, eu preciso armazenar o valor em um estado que é muito exclusivo lidar com a mudança de entrada. E eu vou aplicá-lo se a mudança de entrada identificador em todas as entradas um por um. Então eu vou apenas fornecer esta mudança de ponto e eles vão mudar de entrada. Então eu acho que enquanto PDS agora baseado aqui, eu vou colar aqui, e eu vou colar aqui. Então temos feito com o e, e o nível de formulário. Precisamos de algumas manipulações, vou definir que é tratado de alguma forma. Então vamos definir. E eu acho que nós também estamos tendo me e nós estamos indo para evitar o comportamento padrão de Roger estou escrevendo todos os ganhos, então nós só precisamos escrever u ponto previne padrão. E aqui, a fim de prosseguir na cúpula do punho, temos que adicionar o axial. Mas antes de escrever e eu apenas definido pelo estado aqui também. Então eu vou ter que empatia definitivamente você então não pode formar impiedade para eles. E J. Então, para isso eu vou ter um é cauda, cabeça. E você é o estado e o equilíbrio do convite. E no punho submeter passado, vou verificar. Então, se qualquer entrada em potato, eu não vou permitir apenas enviar o formulário para o servidor de injeção. Então vamos dar cada entrada será no próximo 18 e-mail e o último contato 20. Então eu vou definir a mensagem de erro é e colocar toda a mão de entrada. E o garoto LD, vamos escrever o código para alguém para formar o Watergate. 15. Trabalhando em Adicione ação e redutor para adicionar o usuário ao JSON sever: Então vamos escrever o tipo de sotaque deve. Então eu vou falar nele. Um, eu adiciono um usuário, adiciono um usuário. E adicione um usuário, desculpe, nas Ações. Vou ter que copiar este. Colar. Dei o nome da perna do promotor de lá. E aqui vamos fazer o filtro de você lá. E eu vou mudar o pedido. Onde é que o correio. E eu removerei este e passarei. E o segundo argumento, ele os conhecia, e isso levará à mudança. Então vamos escrever aqui uma ação. Então, vou copiar este. E eu vou dar-lhe a sua adição e será adicionar você lá. Vamos atualizar este. Te vejo lá. E se não, acho que não precisamos porque vamos avançar para a página inicial após a apresentação da bomba. Então, na soma do formulário também, por padrão, estamos carregando o você que detalhe da célula de leitura para que possamos deixar esse como ele é. Quero dizer, você pode simplesmente entrar diferente agora e ir para o redutor e adicionar este caso para que eu possa apenas anexá-lo, definido aqui. Porque ele vai ficar, adicioná-lo e adicionar isso. 16. Enviando uma ação para adicionar dados do usuário: Orientando o usuário. Agora, vá para o mais alto que você tem componente. E lá dentro, na parte L, precisamos escrever o código. Por escrito. Não trouxemos os pares de base. Então temos que trazer a coisa da maçã para cima. Jogando DOM reagir. Fizemos uma grande diferença. E nós fizemos empurrar para o despacho de uma variável. Então deixe que seja rápido. Mas até você ir buscar. E permite que as estatísticas aqui após o se não houver nenhum erro na queda quando todo o campo de entrada é fornecido pela UE lá. Então vamos ser gordos. Então estou me livrando da ética. E eu acho que então da placa VF. E eu vou providenciar este estado. Portanto, neste estado, temos toda a UE lá. Novamente. Vou providenciar este estado. E depois disso, eu vou empurrar o ponto extra, empurrar para a página inicial. E também temos que dividir a empatia se houver erro ocorrido. E desta vez você lá inseriu todos os detalhes na vontade de entrada, então temos que cometer o erro. Então vamos definir o editor tem sido. Então precisamos definir o erro aqui. Então eu vou mostrar o método de área do promotor você lá. E aqui estou tomando se David um erro, então eu vou exibir a área que tem três tempo e estilo. E eu só estou dando a cor. Vamos voltar para o outro. Estou carregando este e sem querer, sem fornecer nenhum detalhe ainda. Apenas soou. Então, estamos recebendo o adenoma e não há mais alto. Por enquanto, vamos fornecer os detalhes de entrada aqui. Então vamos começar os jogos. Então, no método de encadeamento não está funcionando. Então vamos em frente e continuar tipo que eu não providenciei aqui nós vamos caras. Falta-nos um atributo aqui. Precisamos fornecer um atributo de nome também. Mas essa falha não recebendo nada aqui, ou seja, conter e-mail, desculpe, talvez eu vou nomear seu nome será e-mail. E aqui o nome será então número, não número, eu estou em contato. E aqui o nome será o endereço. Então agora vamos tentar mais uma vez no navegador. Então eu vou apenas dar alguns detalhes ainda jogos, jogos, gmail.com no tipo número, endereço que, dar planos. E cansado de submeter a você que mesmo sendo adicionado. Mas ainda não temos recebido dados. Não olhando para isso no JS dentro do nosso administrador. Portanto, há algum problema com ele, se você já leu, mas para VIV, Não estamos recebendo os dados atualizados. O que a UE redireciona para a página inicial. Então deixe-me corrigir esse problema. Então, o que você pode fazer. Então vamos adicionar mais um dado. Só estou pegando algo. Certo, então mente e ganhe algo aleatório. E agora deixe isso. Mas desta vez acrescentou. Então, pode haver algum problema. Não estava acrescentando. Então agora estamos recebendo os dados. Uma vez que você é financiado o salão e, em seguida, aqui os dados e ficando melhor em. Então vamos atualizar um, nossos dados. Agora estou chegando aqui. Adicionaremos um contato no gmail.com. E desta vez eu vou te dar deu e bater em alguém. Trabalhos estão acontecendo. Agora outra vez. Não está sendo atualizado. Então, uma vez que eu atualizo, então eu só estou recebendo os dados deles. Então vamos fazer uma coisa. Então, o que os acentos e apenas descomentar diferem. Então vamos agora adicionar o usuário. Então, novamente, eu vou dar área enorme adequada, que é TFs cauda e a cabeça, gmail.com. O endereço de número aleatório será o australiano se bom. E aperte Submeter. Agora é kVA chegando a ele corretamente e nós estamos, e recebendo o valor atualizado sob você, sua navegação. Então terminamos com o usuário. 17. Trabalhando em formulário de edição: Então, a próxima coisa que vamos trabalhar na funcionalidade, mas você começa um pouco que veio um minuto e nós vamos ter o mesmo código. Temos de ajustar um pequeno código, está bem? Então, copie todo o núcleo e crie um arquivo, sim. E dê a revisão deles. Não o caso. Será novo para você que disciplina cadeia alfa como atualização e mudar o nome aqui eu vou. E ainda está disponível para todos lá. Ok. E vamos dizer isso. No app.js. Por apenas volumoso. Será o “ele”. E eu acho que a identificação e uma ideia importante para usá-la. Então código VS importar automaticamente. Agora venha para casa, sim. E em Idiota, temos que fornecer o onclick. Onclick. O que vai acontecer? Como se fosse sinuca vai posar para você que você fez qualquer caso, porém, você viveu quando você compra um bilhete? E aqui vou eu fornecer a identificação. Mais uma vez, preciso de te dar a identificação negra. Então vamos dar uma chance em sua geral que. E eu vou clicar que eles fizeram. 18. Populate um valor existente em Edit Form usando a Ação: Agora precisamos de todo o valor aqui. Então, seja qual for o valor que temos na tabela para esse usuário específico. Então precisamos de todos os detalhes no campo de entrada até agora que precisamos morrer para uma ação novamente. Então ouvimos que vamos escrever para pegar o dedo que você só vai, precisamos da coisa, realmente usar isso aqui. Então eu lhe dei bem. Qualquer um. E vá para as ações. E sim, uau, ponto final. Mas o Deus, a identidade feminina familiar. Então estamos dentro de você, eles são apenas meio bons. E vá para a área de trabalho e crie um timeshare. Então, tudo bem. Use-o e mude o tipo de coisa. Bem, você aí e eu vou usar o remova este aqui. Não me obrigamos a dar-te o e aqui temos de passar isso como títulos que passaram dados de pontos. Então temos que passar isso, o ataque para os dados e para DKA. Temos que escrever este caso híbrido para este valor ponto tipos lá. E eu vou voltar, e eu vou ler o estado da NTU lá que temos aqui. Normalmente, em seguida, i em uma matriz vazia, e agora será cabeçalho, payload. E carregar serão as paredes. Então vá para o DTU lá. Então terminamos aqui. E você usou isso? Precisamos da identificação. Então, sempre que você lá e navegando, nós estamos recebendo o arrumado o como nós vamos conseguir um arrumado. Então nós, nós vamos ter a idéia. Você acha que os EUA para 0, precisamos usar padrão do roteador reagir. Então precisamos usar isso. E a intenção do componente. Aqui. Eu vou de factor dy, dy. Então use padrões. Bem, vamos namorar depois da identificação. Poucas coisas só precisamos ajustar aqui, então temos ID e precisamos trazer o efeito dos EUA aqui. Assim que tivermos ID em que você faz para você, o componente precisará despachar de ação em ID de usuário real. Então escreverei o efeito aqui. E a próxima coisa, apenas ganhar por dia mão. Vou falar com este pastor, o despacho da facção, e vamos conseguir isso. Ok. Então eles disseram a ação que criamos anteriormente. Agora fique com raiva. Você olha. Então vamos para um DTU lá e apenas fornecer o ID porque ele está aceitando o ID na parte de trás e ele retornará que você usa uma UE específica lá. 2010 que a Ásia e o ADA agora e basta ir para o navegador e voltar e clicar no primeiro. Mas estamos despachando a ação, obtendo valor lá. E você pode ver neste estado você que é indefinido. Ok? Por isso, não estamos a levar a UE para lá. Certo, se não, vamos ver o console. Então, no console temos DU lá, mas de alguma forma você que não é uma espera no redutor. Mítica, no entanto, no console temos como na linha 54, se você for ao acidente. Então, aos 64 temos o controle. Mas não está indo em direção a ele fez é ele vai para o Getty você lá e noivos para usar o que temos para fornecer este ano. Não são significados Ok, Senhor. E usuário He. Então agora vamos, oh, vamos ver no navegador. Então agora vá para os dados. E agora temos o u que aqui. Volte e clique no terceiro. Agora, veja, nós temos os respectivos dados de usuário ou não, mas nós temos esses dados. E agora o que vamos fazer, vamos bater no diretor dinamarquês. Se você usar um lambda é o estado 0. Vamos tirar que temos um enorme selecionado ou não importado. Então não temos usado seletivo, então precisamos usar seletor. E, e use seletor. O que vamos fazer, vamos apenas dar tempos se a UE, o coletor dos EUA t8, dados t8 ponto. Agora temos você que bem. Sobre a próxima coisa que temos que basicamente viu o detalhe ainda, todos os detalhes que temos que pré-preencher aqui quando você clicar com o botão direito do mouse sobre o novamente. Então, parte disso, temos que escrever mais um. Uso mítico da estaca aqui. Desculpe, use o FFT aqui. Então eu vou fornecer mais um ano em vigor. E na verdade que eu vou verificá-lo visão diária, isso significa que este fator enorme vai correr um dia 30 você lá. E agora eu estou levando se há lá, em seguida, passo, notar que levá-lo até lá. Então vamos entrar no navegador. Fornece dizendo indefinido. Certo, agora está chegando. Vamos para o navegador. E agora aqui, em relação aos dados. E ainda estamos recebendo um aviso. Reproduzido um componente está mudando uma entrada de controle na TV e controle onde o valor mudando formativo Manto indefinido. Então este editor geralmente causa porque nós não fornecemos algum valor ainda e a cadeia definitivamente estamos definindo o indefinido na verdade no modo componente, o valor é indefinido dessa forma. Não está recebendo o aviso no console. Então, a fim de evitar esse L, nós vamos simplesmente, você apenas pensou em Advogado aqui. Por isso, é emprestado pensamentos adequadamente avaliação. Você pode dar esse e o editor vai continuar. Não é irônico como um aviso. Então vamos para o navegador, recarregar. E não recebemos o aviso agora no console. 19. Enviando uma ação para atualizar o detalhe do usuário: Vamos ao DTU, o componente deles. E no processo de envio, temos que dissipar a atualização para você lá, para não adicionar qualquer um. É tão mortal lá e certifique-se que é importado. Então, sim. Ok. O importante para mover o promotor que não precisamos neste componente. E então vamos verificar se as partes estão criando não são. Vou deixar de fora. E eu vou dar joias e voluntariar-me e deixar algum encontro. Portanto, não está atualizando o pedido de problema de energia preenchido com o status de indefinido não encontrado. Então vamos para a ação. Então, o tem definitivamente problema na cadeia. Então usuário de dados. Agora, vamos ver o console do console. Os dados não são atualizados também. Eu posso sim. O console também um dado não em Decker. O que é três o que pode ser o problema? É a UE, eles estão atualizados. E vá para o redutor. Tudo parece bem. Vá para a exibição de edição lá e NAD para você lá. Então o problema é como se não estivéssemos fornecendo o ID aqui. Temos que fornecer a identificação porque o nosso sou enviar, receber o momento tuatara. Você lá detalhes e ID. Então vamos para o navegador e dar-lhe mais um. Tente. É outra vez. Esta, dei-lhes alguma ligação. Vamos ver. Agora, eles que o detalhe está sendo atualizado. Então temos um formulário toda a operação de leitura aqui no aplicativo Reagir como criar, ler, atualizar e excluir. E eu vou executar todas as operações novamente para que não tenhamos nenhum problema. Então deixe-me começar com a letra E Então nós somos capazes de ler todos os dados do nosso refúgio GFF. Agora, vamos deletar. Tem sido LaCa. Assim, os dados estão ficando delicados fielmente. Vamos acrescentar lá a UE. Então, novamente, eu vou adicionar o usuário é cauda. E vou dar-lhes um e-mail, um contato aleatório. E isso será claro. Estes arquivos doc criar operação. Então, somos capazes de adicionar o usuário no servidor JSON também. Vamos e, de fato, os advérbios detalhados, então Adam, Marcus, e adicionar o contato ou no identificador de grade. Então eu dei a você e ao Adam 1, 2, 3, 0. Como você pode ver que somos capazes de atualizar o você que você diz 0. Temos um formulário. Toda a terceira operação com a ajuda de Reagir, fazer deck obrigado e defesa. 20. CONCLUSÃO: Se você estiver assistindo a este vídeo, isso significa que você concluiu este curso. E tenho certeza que você ganhou muito conhecimento sobre um Redex. Agora, você será capaz de trabalhar com o redox em qualquer aplicativo React. E também, você tem um pouco sobre aquelas pessoas que só têm conhecimento sobre Reagir. Então, obrigado por fazerem este curso, e eu verei vocês em outra seção do curso.