ReactJS e Redux - Construa 4 aplicativos da Web [3/4] | David Katz | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS e Redux - Construa 4 aplicativos da Web [3/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

14 aulas (1 h 2 min)
    • 1. Apresentando o curso

      1:33
    • 2. ReminderPro de Wireframing

      1:25
    • 3. Apresentando o Redux

      5:55
    • 4. Introduzindo ações e criadores de ação

      5:20
    • 5. Fornecendo uma loja e redutores introduzindo

      5:45
    • 6. Envio de mapeamento para adereços e criadores de ação vinculativa

      6:48
    • 7. Estado de mapeamento para adereços

      3:03
    • 8. Rendering a list of Lembretes

      5:28
    • 9. Excluindo lembretes

      5:47
    • 10. Reduzir o componente de lista

      4:25
    • 11. Lembretes de estampagem de tempo

      4:14
    • 12. Momentos interpretando com o MomentJS

      4:17
    • 13. Cookies de navegador de cozimento

      3:26
    • 14. Limpando todos os lembretes

      4:33
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

692

Estudantes

1

Projeto

Sobre este curso

Torne-se um engenheiro de software altamente exigido, seguindo este tutorial no React JS e Redux. Como uma das habilidades mais bem pagas para desenvolvedores da web, aprender React vai abrir portas e empregos para você.

 

Este curso baseado em projetos vai ter você codificação imediatamente. Construir quatro aplicativos de exemplo cuidadosamente pensados neste curso vai aprimorar suas habilidades no desenvolvimento da web moderna.

 

Primeiro, aprenda os princípios do React JS construindo duas aplicações. Um introduz ES6/Babel, e outro como lidar com solicitações da Web HTTP no React usando uma API. Com o terceiro aplicativo, saiba como manipular cookies de navegador. Finalmente, você vai criar um aplicativo inteiro com autenticação completa e um banco de dados em tempo real para concluí-lo.

 

Além disso, aprenda a engenharia do Redux. Você vai descobrir que o Redux resume até três passos simples!

Não se preocupe se você for novo no desenvolvimento da web. Alguma experiência em JavaScript vai ajudar, mas este curso garante que cada novo conceito seja explicado adequadamente.


Dê um mergulho para React JS e Redux.
Vamos começar a codificar!

 

Além disso, aqui está um link para o repositório on-line deste curso: https://github.com/15Dkatz/ReactJS_VideoGuides

 

Conheça seu professor

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Professor

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentando o curso: bem-vindo a um excelente recurso sobre como aprender a reação. Sim e Redox. Parabéns. A reação de aprendizagem colocará você um passo à frente, pois é uma das habilidades mais exigidas e pagas na indústria de software. Eu projetei este curso com um objetivo abrangente para fazer você ter reagido em um Redux em seu currículo e preparado para construir seus próprios projetos de reação a partir do zero. Neste curso, você criará quatro aplicativos. Um vai colocá-lo em funcionamento com os princípios de reagir e introduzir JavaScript es seis sintaxe. A próxima vontade usando um P I e mostrar que você tinha um acordo com pedidos da Web Em reagir. Terceiro, você aprende Redux. Ele constrói um aplicativo que também armazena informações localmente no navegador. E, finalmente, melhor de tudo, teremos um aplicativo Redox que tem educação completa para cadastrar usuários também. Como um banco de dados de volta veio, vou explicar cada novo conceito precisamente verificando e medindo cada idéia nova. Dessa forma, você tem uma compreensão completa do casaco e engenharia. Além disso, vou te contar um segredo agora mesmo. Redux pode se sentir complicado no início, mas você pode resumir a três etapas básicas. Tudo bem, se você quiser finalmente desbloquear a chave para reagir e redux e adicioná-los ao seu conjunto de habilidades ou você só quer retocar suas costeletas de desenvolvimento Web, então este curso é perfeito para você. Então, o que você está esperando? Vamos começar a codificar. 2. ReminderPro de Wireframing: Olá. Este é Reminder Pro, um pequeno aplicativo doce que permite que você saiba o que você precisa fazer. E quando você precisa fazer isso, funciona. Bastante simples. Adicione seu lembrete no campo de entrada e também a data de vencimento. Assim saberás quando o fazer. Então vamos adicionar uma tarefa. Que tal comprar um galão de leite? Estou dizendo que vai ser feito no dia 31 de janeiro às 12 Você e eles são acrescentados à nossa lista de lembretes. Cuide-se agora. Poderíamos ter datas de vencimento. Mas o aplicativo também decide tornar essas datas mais legíveis e amigáveis para a interpretação humana . Outra coisa boa sobre este aplicativo é que não temos que manter o aplicativo Web aberto para que ele se lembre de tudo. Ele usa cookies do navegador. Portanto, se eu atualizar para armazenar um histórico de lembretes para que, sempre que você os visitar novamente, você veja seus mesmos lembretes na página. Além disso, podemos excluir lembretes depois de concluí-los. Digamos que eu já terminei meu dever de casa de inglês que eu acabei de apagá-lo. Além disso, podemos excluir lembretes todos de uma vez. Depois de completar tudo de bom, aprenderemos muito mais sobre reagir e a Awesome Redux Library. Ao criar este aplicativo, mal posso esperar para começar, então vamos fazê-lo. 3. Apresentando o Redux: antes de passarmos para novo território com código Redux. Vamos fazer algo familiar e configurar nosso aplicativo que usamos criar reagir mais uma vez, e desta vez vamos nomeá-lo. Lembrete Pro. Portanto, certifique-se de que você está no diretório onde você cria todos os seus projetos de reação. Grande como a sua instalação. Vá em frente e posicione vídeo porque eu vou pular em frente para ganhar. A minha candidatura está concluída. Agora, não se esqueça de navegar para o seu projeto. E então, enquanto estamos ganhando no terminal, vamos nos preparar antes do tempo e realmente instalar a redução e reagir bibliotecas Redux para uso futuro. Então, vamos simplesmente usar NPM toe, Install Redux e React Redux e seguro Great Ninguém abre nosso código e configurar nosso primeiro componente. Eu também vou correr e começar PM. Assim poderíamos ver a candidatura dela enquanto continuamos configurando para que eu tenha tudo configurado. A primeira coisa que eu quero fazer é pagar cimento ified arquivo CSS de Bootstrap on-line, então já podemos começar a usar as classes CSS para acelerar o nosso processo de desenvolvimento, Design sábio disse navegar para começar com bootstrap. Vamos encontrar seu mais recente arquivo CSS identificado compilado. Agora precisamos encontrar index dot html dentro do nosso projeto e simplesmente copiá-lo e colá-lo logo acima do título. Ótimo. Nunca volte ao nosso pedido. Agora a próxima coisa que vamos fazer é apagar a pasta de origem e configurar. Assim podemos começar de uma ficha limpa. Agora vamos criar uma nova fonte dobrável. Então vamos criar nosso índice de pontos Js seguindo o mesmo padrão de antes. Lembre-se, temos que importar reagir de reagir bem importantes são reagir burro também. De reagir. Traço para baixo. Vamos fazer reagir burro, não renderizar fazer simples que vamos salvar Reminder Pro? Eu não queria nosso elemento de documento, mas eu d, que é raiz. Recarregar. E lá vamos nós. Vemos o Reminder Pro aparecendo no canto superior esquerdo. A próxima coisa que faremos é criar nosso primeiro componente, mas antes disso, vamos realmente criar um componente fonte. Pedregulho. Então, uma nova pasta componentes, e desta vez estamos tendo uma pasta Componentes porque teremos mais arquivos para trabalhar em todo este aplicativo, e ter uma pasta Componentes irá manter as coisas muito organizadas. Então vamos criar o nosso primeiro componente AP J Sex e, em seguida, vamos importar reagir e o componente de reagir também. E vocês provavelmente já sabem como isso tudo funciona. Há um problema. Digitar ainda mais rápido do que eu será exportado por padrão. Este aplicativo vou renderizar e retornar alguns JSX. Teremos uma div geral cujo nome de classe é apt. Vamos dar o nosso componente lembrete pro. Um nome de classe de título é um título, e vamos dizer Lembrem seu profissional e agora realmente já vai tirar proveito de reagir. Bootstrap. Criamos um formulário aqui. Então o nosso nome da classe fez será formulário na linha porque vamos ter um campo de entrada alinhado ao lado de um botão. Vamos ter um grupo de formulários. Teremos uma entrada de texto para não. Então nossa entrada o nome da classe será controle de formulário, e então nosso espaço reservado será. Tenho dois pontos, ponto ponto, que misterioso. Em seguida, vamos adicionar um botão que irá linha ao lado dele. Seu tipo será botão. É classe. Nome será um dos classe de loja de botas, um Bt amante e abreviação de botão e botões. O sucesso só o torna verde. Há botão perigo botão real e finalmente são Mas o nome será lembrado O que salvar? E, em seguida , é claro, precisamos importar o aplicativo com um índice como s. Então vamos importar AP de componentes Slash em, em seguida, irá colocar este JSX com o nosso APP. JSX. Ótimo. Isso está parecendo bem. Na verdade, só precisamos de um pouco mais tarde. Mas podemos, entanto, no entanto, passar para a funcionalidade real e começar com Redux. Vejo você no próximo vídeo. 4. Introduzindo ações e criadores de ação: Agora queremos adicionar funcionalidade a esse botão de recurso de lembrete de anúncio aqui antes de fazermos isso, no entanto, precisará configurar nosso aplicativo de redução. Agora, vamos ter certeza que você entende um dos primeiros princípios de Redux. Temos uma enorme loja segurando nosso estado de aplicação. Mais uma vez, Store é um objeto global que contém o estado do aplicativo. Ele permite que o estado seja atualizado por ações despachadas e altera o estado com base nele. Ouvindo as ações que enviamos em todo o nosso aplicativo agora intuitivamente, adicionar um lembrete não soa como uma maneira que mudará um estado que mudará toda a loja? Por isso, precisaremos de alguma forma de ter uma ação de lembrete de anúncio para podermos atualizar esta loja. Mas antes de criarmos tal ação, vamos rever o que é realmente uma ação de redução. As ações são apenas objetos JavaScript simples como este. Eles devem ter uma propriedade de tipo, por isso geralmente são tipo seria adicionar lembrete para lembrete de anúncio. E essa propriedade de tipo simplesmente nos diz, leia que tipo de ação está sendo executada, e às vezes eles podem ter uma chave de carga, que contém todos os dados ou algum outro T, que contém todas as informações necessárias dentro do objeto JavaScript, que usaremos para usar essa ação para atualizar a loja. Então, adicionar nosso lembrete significará ter uma ação como esta. Mas não podemos simplesmente criar esse objeto de script de trabalho e esperar que algo aconteça. Não, precisamos do que os leitores chamam de criador de ação, que é mais como uma função que retorna a ação de script Java em si. Então ele retornou todo esse objeto de script de trabalho. Agora pode se tornar confuso. Qual é a diferença entre um criador de ação e inação? Eu sei que há muitas coisas para saber, mas para resumir simplesmente, a ação é um objeto JavaScript em si, enquanto o criador da ação é a função que retorna essa ação ou retorna o objeto JavaScript. Então vamos finalmente começar a fazer essa ação de lembrete de anúncio real. Primeiro, precisamos de um tipo de ação e hospedar nossos tipos. Nós geralmente temos um arquivo Js ponto constante dentro de nossa fonte, se não toda a pasta Constants. Mas, por enquanto, teremos apenas um ponto constante. O dia é divertido. O nosso primeiro concerto. Ele será simplesmente adicionar lembrete e esta string seguinte Ele pode realmente ser qualquer coisa que você gosta , porque estamos realmente focando nesta variável aqui para hospedar dentro de sua aplicação. Então isso pode ser uma string aleatória, um número aleatório, mas geralmente ser apenas paralisá-lo e fazer lembrete de anúncio também. Agora vamos adicionar a pasta de ações para a fonte. Teremos um arquivo Js de ponto índice dentro da pasta de ações. Primeiro, importará esse lembrete de anúncio. Constante. Certifique-se de soletrar corretamente. Aqui vamos nós. Vamos voltar. Um diretório para Constance e, finalmente, vamos fazer esse criador de ação. Vamos chamar a função, adicionar lembrete e declarado como uma constante. Vai ser uma função anónima da era. Ele vai ter um entregar o texto que vamos passar. Por enquanto, vamos definir uma ação aqui dentro. Lembre-se, nós temos esse tipo e vai ser adicionar lembrete que reimportado aqui. Os nossos dados serão simplesmente O texto neste texto que me lembro que podemos usar é seis mãos curtas em impostos quando a chave eo valor são exatamente os mesmos. Agora, antes de retornarmos essa ação, vamos fazer o registro de pontos do console. Assim, podemos entender o que está acontecendo como fazemos. Buck é uma defesa no futuro. E então vamos retornar a ação. E eu só notei uma coisa que eu não criei o arquivo Js de ponto de índice, eu apenas criei um arquivo Js. Eu não indiquei o pai de Dajae. Então diga índice de pontos Js. Vamos mover tudo daqui. Você provavelmente não cometeu o mesmo erro e eu vou apagar isso aqui. Sim, salve-nos. Ótima. Agora que tivemos esta ação configurada, ainda não vamos fazer nada com este botão. Ainda há um pouco mais para acertar com o Redox. Mas não se preocupe, fique paciente com isso. Leia para nós é tão incrível quando finalmente vem junto. E confie em mim quando digo que quando você estiver construindo um enorme aplicativo Redux, certifique-se de mantê-lo muito simples para você, apesar de todo o Senado inicial no início. Então vamos passar para realmente conectar essa ação ao nosso aplicativo 5. Fornecendo uma loja e redutores introduzindo: temos mais um passo a considerar na configuração da nossa aplicação Redux. Precisamos pensar em inicializar a loja de verdade agora. Embora tenhamos inação Creator para adicionar lembretes recentes, eu não tenho idéia do que o estado é para aplicação global. O que precisamos fazer é configurar um componente fornecido da React Redux que passará sua loja para toda a nossa aplicação. Nunca chegar ao índice ponto sim, e nós importamos provedor de React Redux. Agora, adicionar um provedor é simples. Basta montar essa etiqueta de aplicativo dentro de uma tag de provedor. Aqui vamos nós, e enquanto economizamos, pode parecer que já temos loja para nós, mas como podem ver, temos um ar aqui. Ele diz que a loja de prop é marcada como necessária e provedor, mas seu valor é indefinido. Então vamos criar uma loja que vamos importar, criar loja de leitura. Vamos declarar uma constante de loja como cria loja, que é uma função, e então vamos passar uma chave de loja para o provedor em uma loja. Vamos recarregar. E agora, diz-se, esperava que o produtor fosse uma função. Então vamos pensar sobre o que um produtor realmente significa em termos de redução para que possamos passar um para esta loja. Se em patos re, todo o estado de aplicações existe como uma loja ou objeto único, o que reduz fazer é simplesmente tomar o estado em uma ação e retornar novo estado para que os produtores baseados em ação irá modificar o estado em uma distância pura. Há uma regra enorme a observar com redutores, você nunca deve tomar o estado diretamente. Isso causará enormes ares de desempenho. Então, o que fazemos é pegar o estado e retornar inteiramente novas instâncias dele em vez de simplesmente modificá-lo. Com isso dito, vamos criar uma pasta redutor dentro da nossa fonte e, em seguida, declarar um ponto de índice como divertido. Primeiro, vamos importar o lembrete de anúncio Constante de são Constants Holder. E para começar, teremos um produtor como uma constante com o nome de lembretes. Será outra função de seta anônima, e teremos dois parâmetros, um parâmetro de estado pré-inicializado para uma matriz anti, bem como no parâmetro de ação como o segundo argumento. Agora ele é inicializado, disponível dentro de um redutor lembretes chamado lembretes. Simplesmente não será mais tarde. Vamos alterar a variável lembretes para se tornar um estado de retorno. Portanto, lembre-se que nossa ação retorna o tipo que poderíamos usar esse tipo para entender exatamente como queremos modificar nossos lembretes para um estado. Então, vamos usar uma instrução switch no tipo de ação porque podemos esperar mais de um tipo de ação no futuro. Além disso, adicione o lembrete. Mas vamos considerar o nosso primeiro caso, que é anúncio lembrete neste caso, vai mudar lembretes bem enviados lembretes novamente para uma arena. E então vamos usar uma idéia legal. Seis. Truque chamado o operador de propagação se espalhará no estado, e o que o operador de propagação nos permite fazer é copiar o conteúdo de um ou raio ou objeto em outra taxa ou objeto. É muito conveniente. Assim, o primeiro elemento em lembretes de chuva será este estado de propagação atual, e o próximo será um novo lembrete com nossas ações. Agora, precisamos definir este lembrete funções assim acima vamos definir Helper Reminder Function, que leva um argumento para a ação como seu pai irá simplesmente retornar objeto como um lembrete com o texto do texto do ponto de ação e, em seguida, e I d de uma variável aleatória impressionante foram muito próximos. Agora precisamos continuar configurando este redutor lembretes. Vamos Cônsul, não registre são lembretes como estado. Assim, podemos depurar no futuro. O que mudaria lembretes, é claro. E não se esqueça em uma instrução switch, nós sempre queremos o padrão e por padrão retornará o estado de cima. E estamos muito perto. Só precisamos exportar. Nosso produtor disse que assim outros módulos podem reconhecê-lo, e agora podemos voltar aos toques de índice para finalmente consertar este ar. Agora, antes de seguirmos em frente, alguns de vocês podem ter que recarregar seu servidor de desenvolvimento tendo o controle C e fazendo o NPM começar de novo porque acabamos de adicionar um novo mês. É isso que recarrega. Vá em frente e espere. E finalmente, podemos importar produtor de nossos produtores e então vamos simplesmente discutir o produtor dentro de nossa loja. Ótima. Parece que nosso redutor está funcionando agora. E nós passamos muito tempo pensando em lojas e provedores de redutores, alguns conceitos realmente fundamentais da Redux, e nós realmente nos aproximamos um passo de realmente mudar nosso estado de aplicação com Redux. Trabalho incrível 6. Envio de mapeamento para adereços e criadores de ação vinculativa: Agora vamos tentar conectar o criador de ação que fizemos ao aplicativo dela. Primeiro, precisaremos fazer alguma configuração com seu campo de entrada e botão. Precisamos adicionar alguns estados do componente, de modo que reconhecemos o que o usuário digita no campo de texto. Então vamos adicionar um construtor. Mas os adereços se lembram, precisamos de super adereços é a primeira linha. Vamos inicializá-los como um objeto. Um monte de texto de branco para agora e, em seguida, no campo de entrada vai usar são familiares na função de mudança . Assim como antes. Vamos ter variável de evento, na verdade, e vamos definir o estado do nosso texto. Dois. Evento. Não alvejar. Não valorize. Próximo. Vamos definir um lembrete de anúncio. Ajuda fermentada com a sua aplicação para que possamos simplesmente conselho ponto log o estado para nada além de dizer e lembrete nesta função irá simplesmente registrar o estado este estado de início e vamos anexá-lo a este botão. Clique. Então, clique é igual a essa coisa. Adicionar lembrete. Fenda legal. Veja, digamos que eu tenha que comprar mantimentos no Runner e lá vamos nós. Temos o nosso texto como comprar mantimentos no estado. Ótima. Agora que vemos nossos técnicos registrando. Podemos passar para conectar nossa loja de turnê de componentes e o criador de ação que criamos para se conectar à nossa loja neste componente precisará tirar proveito de reagir. Redux é função de conexão, então vamos importar a função Connect de React Redux. Esta função de conexão funciona conectando duas funções para reagir. Componente primeiro conecta um mapa estados uma função adereços e Matt despachado para função adereços . Teremos que pensar em Matt State para adereços ainda, mas vamos escrever uma função chamada Matt Dispatcher prompts agora porque gostaríamos de conectar nosso criador de ação de lembrete de anúncio aos aplicativos. Então, antes de fazer isso, no entanto, vamos lembrar importante de nossas ações como nós salvar reload e, em seguida, na parte inferior depois de um componente, vamos definir e que dispatcher adereços função, matemática adereços do despachante. É muito simples camelo, assim como este. Então, em que os adereços do dispatcher, precisamos respeitar o criador da ação para este aplicativo, e para isso vai precisar de uma função específica chamada Vincular Action Creators, sua importação que agora importar criadores de ação de ligação da Biblioteca Redux regular. E eu vou mover isso para cima. Adicionar lembrete. Incrível. Agora vamos declarar que função especial dispatcher dispatcher adereços e passou o argumento de despacho . E então vamos retornar a função de vinculação Action Creators que acabamos de importar aqui como o primeiro argumento terá um objeto com nossa função de lembrete de anúncio, bem como o despacho como um segundo argumento. Então, tenha paciência comigo aqui. Eu sei que isto parece muito complicado, esta função aqui, mas vai fazer sentido. O que está tudo ligado, e começamos a usá-lo. Então lá vamos nós. Agora precisamos conectá-lo ao nosso componente vai chamar a função de conexão de Redux. Lembro-me que o nosso primeiro argumento deve ser mapear estado para adereços, mas ainda não temos isso definido, então vamos chamá-lo. Não, mas temos um mapa de expedição de colheitas, então discuta aqui. E, em seguida, vamos ter o nosso componente aplicativo finalmente ligado, Digamos e, em seguida, dentro teve lembrete que também vai registrar o estado. Também quero ver adereços. Então vamos apenas tirar o estado e registrar tudo isso porque eu quero ver este ponto adereços. Assim podemos ver. Adicionar lembrete. Na verdade, mapeado para o nosso componente. Então, digamos mais uma vez que temos que comprar mantimentos e conferir. Temos um objeto apropriado, um objeto de vasos internos. Agora temos nossa função de lembrete de anúncios dos criadores de ação Bind. Vamos verificar nossas ações mais uma vez para ver como adicionar lembrete funciona. Lembre-se, só precisamos passar texto para a função de lembrete de anúncio. Então, dentro de seu método auxiliar de lembrete de anúncio, vamos chamar isso de parada adereços ponto e lembrete e passar nosso texto de estado. Remova este log do console, digamos e vamos ver o que acontece. Bem, temos uma ação. Um lembrete de anúncio do tipo. Adicione texto de lembrete, compre mantimentos e confira ou reduza er. Também sorte, uma vez que reconhece a ação. Toda nova propriedade, incluindo o nosso objecto com um ID de uma mercearia aleatóriae R Texas. Toda nova propriedade, incluindo o nosso objecto com um ID de uma mercearia aleatória Parece que a redução está funcionando muito bem. Vamos rever o que realmente aconteceu com Matt despachado para adereços, Então o que map dispatcher adereços essencialmente faz é ligar os criadores de ação que criamos para a função geral de despacho durante toda a nossa reagir Redox Application Mason acessível como adereços dentro deste componente específico. Quando chamamos o recurso Conectar Agora, há um pequeno atalho. Enfraquecer fazer, Uma vez que estamos apenas adicionando lembrete adicionar. Em vez de ter uma função de envio de mapas inteiro de adereços, eu posso simplesmente não ter objeto aqui no lugar. Adicione lembrete como Mikey e Value e retire adereços do dispatcher mapa inteiramente. Nós salvaremos. Aguarde até que recarregue. Vamos fazer você comprar mantimentos mais uma vez e você vai notar que ele ainda funciona. E agora nem precisamos importar criadores de ações de compra. Então, vamos levá-lo para cima. É um atalho noturno que Redux nos fornece. Legal. Agora vamos passar para realmente adicionar adereços de estado do mapa para que possamos atualizar o Estado Redox com nossa ação e reconhecê-lo em nossa interface de usuário. Excelente trabalho. 7. Estado de mapeamento para adereços: vamos definir esse estado para adereços para que possamos reconhecer o estado Redox dentro deste mapa componente. Veja para adereços vai funcionar muito simplesmente, argumentamos, uma função dentro do primeiro parâmetro de reduções ligar função. Isso nos permite ouvir um estado como um argumento com sua função passada. Então vamos definir o estado do mapa para adereços bem aqui. Capa da câmera. Como eu disse, temos o estado como um dos nossos argumentos. Por enquanto, vamos simplesmente lei de pontos cônsul, o estado como estado, e agora podemos simplesmente passar nesse estado para adereços à nossa função de conexão. Não se esqueça de salvar. Agora vamos inspecionar o elemento. Assim podemos ver o que acontece quando adicionamos um lembrete. Então agora ele está dizendo mapas em adereços e conectá-lo deve retornar para reproduzir objeto. Bem, não se preocupe. Vamos ver o que acontece quando decidimos adicionar um lembrete. Enfim, vamos cumprimentar a vovó. Ok, nós vemos um novo estado aqui, e é o nosso objeto, como você pode ver com o nosso I d e o texto da avó grega Cool. Então está nos dizendo para devolver um objeto de avião, e é exatamente o que vamos fazer. Nós estamos indo para transformar um objeto plano com são lembretes como estado porque isso se parece exatamente com o que queremos são lembretes objeto para ser foram lembretes taxa de ser Em vez disso, Isto é porque no ponto índice Js são lembretes. redutor é o redutor global para toda a nossa aplicação. Depois de salvar isso, vamos excluir o log do console de estado e simplesmente adereços de log de ponto cônsul dentro de uma função de renderização e ver se ele é atualizado. Eu digo isso Parar adereços, salvar legal e vamos dizer que sim, tivemos que cumprimentar a vovó e eles são adereços vai Então depois de adicionar nosso lembrete, os adereços aqui tem são lembretes e é a nossa taxa de um incrível. Vamos aproveitar um breve momento para apreciar a beleza de Redux. Redox nos dá tanto poder porque podemos acessar essa parte do nosso estado global em qualquer componente futuro que criarmos. Nós simplesmente precisamos conectar nosso componente ao estado global de uma maneira semelhante a que fizemos aqui com o componente APP e, em seguida, combinamos qualquer criador de ação redefinindo no futuro, a fim de atualizar o estado de todos os nossos componentes e todo o nosso , em nossos aplicativos anteriores. Simplesmente passamos o estado de um componente para o outro porque tínhamos problemas muito simples de gerenciar dados. Mas imagine que um aplicativo Web de rede social inteiro como Facebook ou Twitter poderia definitivamente se beneficiar de ter uma implementação como Redux que permite que cada novo componente acesse o estado global. E acredito que vocês treinarão esse tipo de aplicativos de redes sociais, coisas que são realmente complicadas. Independentemente disso, agora temos um lembretes em adereços. Então vamos expandir a interface do usuário para mostrar ao usuário que ele realmente enviou um lembrete de uma vez por todas. 8. Rendering a list of Lembretes: Vamos construir um componente que lida com renderização são lembretes. Agora temos lembretes e adereços, e tudo funciona bem, mas o usuário ainda não sabe disso. Então vamos definir nossos lembretes de renderização. Ajuda renderizar Lembretes neste método estavam retornando na lista ordenada de lembretes enviados pelo usuário. Então primeiro quer acessar são lembretes Lembre-se que podemos usar. E ele tem seis truques sempre que são nome da variável e a propriedade que queremos é exatamente a mesma. Então vamos conselho não registrar lembretes para verificar se isso está realmente funcionando antes de mim. Então, vou deixar este concerto. Não registre adereços. Senão vai explodir nosso cônsul antes de seguir em frente. Nós realmente precisaremos chamar isso, não renderizar lembretes em nosso JSX E essas chaves nos permitem apenas renderizar ou usar uma função dentro do próprio JSX. Então, digamos que eu preciso. Você compra alguns mantimentos, nós adicionamos um lembrete. E agora os lembretes estão vazios. Mas assim que não estiver vazio, obtemos uma matriz com nosso objeto. Ótimo. Agora podemos nos livrar do registro do cônsul que sabemos que são lembretes. Variável está funcionando. E agora nós podemos realmente avançar para a construção da lista ordenada da ONU e JSX que irá controlar renderização da nossa lista sobre os mineiros. Então, primeiro, lembre-se, com o JSX, sempre queremos devolver o JSX. Não podemos escrever. Então teremos uma nova lista encomendada. Primeiro, nosso colega de classe para a lista ordenada da ONU será alguns nomes de classe de loja de alimentos reagir. Então vamos agrupar espaço grupo traço. Vamos usar a coluna, sm quatro, que é apenas um bom tamanho que se encaixa na nossa aplicação. Desta vez teremos outra cinta encaracolada. Vamos mapear lembretes para que possamos renderizar cada lembrete individualmente como outro componente de lista . Então, novamente, precisamos devolver o JSX. Teremos uma tag de sexo da lista. Nossa chave será um lembrete que eu me lembraria. Cada um desses lembretes tem 90. E, em seguida, este nome de classe para este componente de lista será um item de grupo de lista. Então é um item neste grupo de lista que criamos com uma lista Norden. Legal. Então teremos um desenvolvimento com apenas o nosso texto de lembrete para nada. Vamos salvar e ver como isso se parece. Então, se eu tiver que fazer minhas compras. Lá está ele. O que eles têm para cumprimentar a vovó. Não. E aí está, aparecendo em uma lista muito bonita. Agora não quero que fique entre o botão. E eles fizeram. Na verdade, eu quero falar depois de todos os componentes do formulário. Então vamos colocar depois que eu vou salvar e mais uma vez cada avó. Tudo bem, legal. E enquanto estamos nisso, está na hora de adicionar alguns de nossos próprios CSS a este aplicativo. Só para que a aparência pareça um pouco melhor. Então vamos definir um novo arquivo CSS globalmente dentro de nossa dobra fonte. Então é um novo arquivo índice CSS. A primeira coisa que vamos atingir é o nosso componente em. Lembrem-se, não temos o nome da turma. Vamos em frente e dar-lhe um pouco de preenchimento superior de cerca de 20 pixels. Não quero mais tocar nos sinais. Vou dar-lhe uma exibição de flex a direção flex. Tudo vai ser coluna porque se você fizer isso por linha, tudo vai agora ficar lado a lado. Eu quero ser normal no normal é chamar que você vê agora o que é a linha tudo para o centro. Agora nosso título também deve ter uma linha têxtil de centro. Vamos torná-lo significativo. Queremos que o tamanho da fonte seja maior. Vamos aumentar para 26 picles agora. A última coisa que precisamos fazer é incluir índice CSS dentro de seu índice Js. Então vamos importar simplesmente indexar ponto CSS do mesmo diretório. Eu vou dizer isso e ah hah, isso parece muito melhor como um redimensionamento. Um pouco mais. Você pode ver que este é um verdadeiro componente de linha. Então vamos dizer que eu tenho que fazer. O que é mesmo? Comprar mantimentos ainda não fez isso e isso está parecendo muito melhor agora. Acho que isso precisa de um pouco de espaçamento. Vamos voltar para CSS e, em seguida, mudar o componente infligir queremos alterar todas as entradas. Tudo bem por agora, porque se você só tiver um mais tarde, você pode querer usar um nome de classe. Vamos apenas obter uma margem de cinco pixels e depois para o aplicativo. Vamos chamar isso de lembrete para e, em seguida, nosso formulário de lembrete vai ter algum preenchimento de cinco pixels. Então vamos verificar isso. Certo, isso parece muito bom. E digamos que tenho que ir pescar Sweet. Isso está muito bonito. Então agora podemos passar para realmente implementar algumas funcionalidades para excluir itens desta lista. Digamos que eu realmente fui pescar Bem, eu tenho que me livrar desse lembrete agora porque você já me lembrou e ele fez isso, então vamos seguir em frente. 9. Excluindo lembretes: Vamos dar ao usuário uma maneira de excluir os lembretes. Vamos adicionar um pouco de JSX aos nossos componentes. Assim, o usuário tem um botão para clicar que lhe permite fazer ser um lembrete da lista. Teremos uma div muito simples aqui. Vamos dar alguns nomes de classe. Este vai ser um componente de item de lista e também será chamado para sair. Mas agora, bem ao lado dele, nós também vamos chamá-lo de item de lista porque estamos em aplicar para estilos de uma só vez para ambos estes é que eles iriam renderizar ao lado do outro então para a Itália, Mas nós poderíamos ter um X muito simples quem quer que vamos usar um pequeno ícone Unicode para torná-lo muito melhor. Este ícone Unicode é adicionar hash X 2715 e basicamente se parece com um lado de multiplicação muito carne . E não se esqueça desse ponto-e-vírgula. Então, quando estamos pensando em excluir um lembrete, isso definitivamente soa como uma ação que muda o estado. Isso significa que estamos adicionando a lógica de nossos leitores no aplicativo. Sempre que adicionarmos, leia a lógica. Precisamos realmente pensar sobre isso em três passos. Primeiro definimos uma constante. Em segundo lugar, fazemos um criador de ação e terceiro, e finalmente nós alteramos ou criamos um reduzido para começar tudo, lembre-se, precisamos criar um novo conceito. Então dirija seu ponto consciente Js Bach. Vamos exportar nova constante e chamá-lo excluir Lembrete é igual excluir para o meu Agora estamos certos . A função real, que lida com a exclusão são lembretes dentro do ponto de índice Js de ações primeiro, como a nova constante esporte chamado Excluir Lembrete. E por enquanto, vamos ter apenas uma função de seta anônima vazia. Agora vamos pensar sobre isso por um minuto. A fim de excluir. Os lembretes precisarão de uma maneira de identificá-los. Felizmente, recriando um i d para cada lembrete dentro do nosso redutor para que pudéssemos especificar. Então vamos adicionar um parâmetro i d a este argumento. Agora vamos começar a definir nossa ação. Claro, precisaremos importar lembrete de exclusão Não, de uma constante. E, em seguida, esta ação , é claro, precisa de um tipo, e este tipo será excluir lembrar. Agora precisamos pensar sobre quais informações queremos. Ação para ajudar. E essa chave será ideia não, bem como um valor que passamos para a elite lembrar antes de seguirmosem frente, digamosque o registro de pontos do conselho exclui inações. E essa chave será ideia não, bem como um valor que passamos para a elite lembrar antes de seguirmosem frente, digamos em frente, Tudo bem, para que tenhamos uma maneira de depurar no futuro. E finalmente, vamos devolver essa ação. A seguir, temos que ligá-lo à candidatura dela. Então vamos lembrar de elite importante de ações Agora. Agora precisamos adicionar isso à função Ramat Despacho de adereços. E lembre-se, nós o usamos. Precisa Redux dedo do pé truque, na verdade se livrar desse mapa enviado para adereços declaração para que possamos apenas colocar excluir lembrete. Ao lado de adicionar lembrete. Aqui e agora vemos a beleza de Essex vindo a calhar. Nós temos várias chaves, mas isso realmente encurta nosso código quando não temos que especificar cada vez que os valores dessas chaves, já que eles são exatamente os mesmos. Agora, vamos ligar um método auxiliar para o clique de seu botão JSX que configuramos anteriormente para que possamos ver o que acontece versus adicionar uma exclusão lembrar seu método auxiliar. Este também terá um I.D. I.D. V. Isso é registro de pontos do conselho deletando no aplicativo. E por enquanto, o que são adereços de registro do conselho? E por enquanto, Apenas uma verificação se estamos realmente tendo lembretes diários aparecendo em nosso mapa. Adereços do despachante. Finalmente, vamos ligar no evento clique para a div que foram criados anteriormente. Então, digamos em Click função era anônimo para chamar este lembrete de exclusão de ponto. E lembre-se, precisamos passar a identificação então é um lembrete que eu diria que teremos um novo lembrete. Ir às compras. Vamos inspecionar a omissão antes de tudo e, em seguida, clicar no boom do especialista. Então essa parada adereços. Vemos que temos um lembrete diário realmente despachado e levando um aplicativo recebeu o I D que queremos excluir Grape Now adicionamos esses elementos CSS, então vamos em frente. E para encontrar o item de alistamento, quero que a exibição esteja no bloco de linha. Assim eles se alinham lado a lado. E então nosso botão de exclusão vai flutuar à direita e ter um preenchimento à esquerda de cinco pixels. Assim, parece muito bom. Você vai ver, hein? Esqueci-me de especificar que o Float é separado por dois pontos e mais uma vez, digamos ir às compras, Boom. Ótima. Então, agora que temos nosso criador de ação realmente despachando excluir lembrete. Temos de alterar o produtor de modo a alterar efectivamente o pedido com base nesta acção despachada . Vejo vocês no próximo vídeo. 10. Reduzir o componente de lista: Não, mas temos uma maneira de enviar a nossa entrega. Em ação. Precisamos reconhecer que dentro de nossos lembretes redutor. Em seguida, podemos atualizar o estado do aplicativo para realmente remover esse lembrete da lista . Vamos começar a adicionar remover recurso lembrete para um reduzido precisamos importar para deixar lembrete de Constance. Em seguida, vamos adicionar à instrução switch para lidar excluir caso lembrete também. caso bem acertado. Excluir lembrete. Agora, como regra, são lembretes ou o que for. O retorno de estado não pode ser modificado diretamente. Precisamos lidar com nosso estado de forma pura e não modificar diretamente nosso estado com quaisquer funções para manipular ou aumentar como spice push ou pop. E isso soou como movimentos de dança. Então, em vez disso, vamos mantê-lo fresco, mantê-lo puro e ter um removida i. D. função retorna em sua Harley New Array com base em nosso estado atual e eu d com o mesmo estado exceto o objeto que especificamos removido. Então vamos declarar que remove i d função agora removido por i d. Ele terá dois parâmetros. Primeiro, um parâmetro de estado inicializado para um interior, assim como um redutor de lembretes e também um iniciador I D. Em seguida, vamos tirar proveito de um filtro de matriz em JavaScript porque filtros assim como a função de mapa , retornam inteiramente novas matrizes de dados em vez de modificá-los diretamente. Então vamos declarar seus lembretes constantes, e eles dirão: É nosso estado, mas filtrado um lembrete de cada vez. E isso parece apenas como uma função de seta anônima. E o que queremos fazer é filtrar o lembrete cujo I D é igual ao nosso passado. Eu d. Agora o filtro vai transformar qualquer coisa que passa é um retorno solar verificação de qualidade em vez disso, se o ponto lembrete i D não é igual ao i D. Então, dessa forma, temos uma matriz de todos os objetos não iguais àquele cuja idéia foi clicando nele. Então vamos dizer Who's lembrete dot i D não é igual à idéia que especificamos. Vamos registrar nossos novos lembretes nossos novos lembretes reduzidos em vez disso e devolvê-los. Finalmente, vamos adicionar esta função, chamar para ela excluir caso lembrete. Então vamos dizer lembretes é igual para remover meu eu d vai passar nosso estado, como foi a ação tem I D que nós especificou em nossa ação. E então vamos em frente e retornar nosso novo estado de lembrete. Agora, antes de salvarmos, estou percebendo alguns erros com nossa decoração de função real. Precisamos de sinal de igual aqui, bem como um sinal de seta igual aqui para nossa função de seta real. Então vocês provavelmente pegaram isso. Então não diga antes de fazer isso, então vá em frente e salve. E agora vamos inspecionar o momento para ver exatamente o que está acontecendo. Vamos adicionar um novo lembrete. Compre mantimentos e vamos ver se podemos fazer isso agora. Repare que nada aconteceu ainda. Isso ocorre porque um aplicativo que o JSX ainda estava esquecendo de chamar o lembrete de exclusão de nossa ação de despacho. Então vamos em frente e adicionar essa chamada salvar. Mais uma vez, vamos por nossos mantimentos Clique X e confira. Temos uma nova redução lembretes para matriz vazia, e lá ele é excluído. Então é em um casal comprar mantimentos boom, boom, boom que estamos excluindo eles. Compre mantimentos de novo. Vou comprar mantimentos um e comprar mantimentos também. Então vamos dizer que fizemos um primeiro, e depois fizemos o primeiro comprar mantimentos e depois fizemos o segundo comprar mantimentos para que você possa ver que está funcionando espetacular. Estamos ficando melhores em Redux e configurando-o mais rapidamente, e espero que a lógica de leitura dos EUA que estamos aprendendo agora esteja se tornando clara. Ele só se tornará mais intuitivo à medida que continuarmos construindo este aplicativo, então vamos seguir em frente. 11. Lembretes de estampagem de tempo: Neste ponto, parece que temos uma aplicação quase completa. Ainda assim, podemos adicionar funcionalidades adicionais para tornar o Reminder Pro ainda mais útil para o usuário. Normalmente, lembretes têm uma data anexada a eles um certo tempo em que a pessoa tem um completo para o lembrete. Então vamos adicionar um campo de entrada extra para o JSX que permite ao usuário selecionar o tempo que os lembretes devem ser feitos. Vamos adicionar outro campo de entrada ao lado de seu 1º 1 nome de classe deste também será formado controle, mas seu tipo será local diurno, o que será útil porque ele puxa um calendário selecionando vista. Agora nós simplesmente precisamos inicializar uma data de vencimento dentro do nosso texto dentro do nosso estado. Em vez disso, defina-o como uma string vazia. Agora vamos aproveitar a função on change, assim como acima como fazemos com texto Então, tendo variável de evento, em seguida, vamos definir o estado de são data de vencimento para este evento de combustíveis de entrada. O alvo de pato não valoriza muito, digamos, e como você pode ver, agora temos uma visão de calendário que podemos colocar às vezes. Agora que temos nosso JSX configurado, vamos pensar sobre o quê? Adicionar uma nova propriedade ao seu lembrete de anúncio Criador de ação significa que, em termos de nossa lógica Redux, eu, por exemplo, terei que alterar nosso criador de ação real para retornar não apenas o valor do texto, mas também a data de vencimento que passamos. Então vamos ao nosso criador de ação. Tivemos adicionar lembrete aqui, e vamos permitir ter um segundo parâmetro de data de vencimento, então, muito simplesmente, não só retornará ao texto abreviado, mas também o nosso dever. Esta chave vai ficar bem porque ele mapeia exatamente para o valor que passamos. Lembra-te da abreviação de Essex. Em seguida, vamos precisar pensar em adicionar lembretes em nosso redutor. Então vá para seus redutores e vá para a função de lembrete auxiliar e observe que nosso produtor simplesmente toma uma ação. Neste momento, estamos mapeando texto para ação, texto doc. Quem quer que esteja passando a interação com a data de vencimento. Nós também podemos simplesmente pegar nosso texto e sua data de vencimento tudo de uma vez, igualando a ação do dedo do pé. E esses são os Essex vindo a calhar de novo. Vamos remover este texto de ação de texto aqui, por favor. Mensagem depois de eu ter sido tão bem quanto o nosso dever era, ele tinha aquele cofre. Isso deve ser suficiente para ter datas de vencimento em todos os objetos de ação para lembretes. Agora é simplesmente uma questão de mudar o ato de GSX. Chamada para lembrete de anúncio. Portanto, também queremos que nosso estado de data de vencimento seja passado para nossa nova função de lembrete de anúncio. Por enquanto, vamos fazer o registro do conselho para ver se estamos conseguindo uma data de vencimento. Vamos passá-lo este estado que o dever salvaria. Vamos inspecionar o elemento agora e ao nosso primeiro lembrete para ver o que está acontecendo, digamos que eu tenho que ir ao dentista. Este lembrete vai ser no sábado às três oclock Pierre e legal. Temos lembretes em nosso estado, e esses objetos agora têm datas de vencimento dentro deles. Incrível. Então, agora que temos algumas datas, podemos jogar isso em cartões de lembrete. No entanto, podemos torná-los ainda mais compreensíveis para o usuário usando alguns truques de script de trabalho. A não ser que queiras jogar esta cadeia de datas ali. Então veja no próximo vídeo onde começamos realmente incluindo esses dados na interface do usuário 12. Momentos interpretando com o MomentJS: Primeiro para cima. Agora vamos incluir essa data de vencimento. Dentro do nosso lembrete, suas fricções simplesmente irá adicionar um elemento ao lado do nosso texto de data de vencimento e ter um diff que envolve o nosso dever de lembrete. Então, vamos renderizar lembretes, encontrar o texto do lembrete e vamos ter outro DIV ao lado do nosso texto de lembrete. Isso é apenas uma data de vencimento do ponto de lembrança. Agora queremos embrulhar esta coisa toda como um item de lista em si. Vamos envolver nosso texto de lembrete em torno de uma div. Mais dias na etiqueta de encerramento e vá em frente e pegue aquele lembrete detetive. Coloque-o ao lado dele. Dessa forma, ele fica ao lado do nosso botão de exclusão. Agora vá em frente e salve. Vamos adicionar outro lembrete. Vá ao dentista mais uma vez. Eu sei disso. Escolha uma data aleatória, digamos, 12 horas e lá vamos nós. Temos nossos textos de lembrete renderizando bem na parte inferior. Agora quero acentuar. Uma maneira fácil de fazer isso é tirar proveito de algum JSX guerra e envolvê-lo em uma tag final, que é abreviado para enfatizar, que essencialmente dará a ele um olhar itálico noite. E então, mais uma vez, temos que em um lembrete 12 pano Pete e legal. Então, agora que é enfatizado, temos isso em itálico. Nossos encontros parecem legais, mas parece algo que um robô pode querer interpretar, não usuários humanos. Então, queremos transformar essa string JavaScript em um carimbo de data/hora amigável. Felizmente, os engenheiros de software já resolveram esse problema escrevendo bibliotecas inteiras dedicadas a essa funcionalidade exata. Então vamos voltar ao terminal e instalar uma biblioteca chamada momento. Certifique-se de que você está em seu diretório de projeto real, então revestimento React, Reminder pro ou qualquer diretório que você tem seus projetos reagir em um momento de instalação NPM e seguro como uma nota lateral. A grande coisa sobre o desenvolvimento com reagir é que você terá acesso às milhares de bibliotecas JavaScript lá fora já para melhorar sua aplicação. São apenas alguns cliques no Google, alguns minutos de leitura e uma instalação NPM de distância. Então, agora que temos instalado um momento importante a partir do momento no topo do nosso aplicativo JSX , é um momento importante de eu não vou Agora vamos adicionar alguma lógica momento para nossos lembretes data de vencimento , então encontrar o lembrete devido data, e usamos momentos a partir de agora Função, que leva uma data de script de trabalho e retornar ao psiquiatra amigável humano interpretando essa data. Então primeiro vai me este texto para ser uma data JavaScript. Então, vamos declarar uma nova data e argumentou a data de vencimento lembrete como o primeiro prender. Agora precisamos escrever tudo isso em um momento. Objeção, e então vamos em frente e ligar a partir de agora. Casaco de camelo. Vamos salvar e verificar como ele se parece no aplicativo lembrete pro. Então, mais uma vez, eu ainda não fui ao dentista no dia 25 e meio da tarde. Isso não parece muito melhor? Incentivos. Tendo que estamos procurando JavaScript String, que diz 2017 1 25 t 12. Só diz que em 11 dias, bom e carne. Agora vamos adicionar algum processo de funcionalidade adicional. A coisa mais faltando com este aplicativo, componente ou aplicativo em geral em comparação com outros é que sempre que atualizamos a página, começamos com uma lousa limpa. No entanto, idealmente queremos acessar os mesmos lembretes que adicionamos antes, sempre que revisitamos o aplicativo para que possamos aproveitar os cookies no navegador do usuário , ter um histórico local de todos os seus lembretes. Vamos implementar que misto 13. Cookies de navegador de cozimento: Vamos resolver os problemas dos usuários que precisam adicionar novamente todos os seus lembretes cada vez que eles voltam para o aplicativo. Uma solução é armazenar todos os lembretes em cookies. Então, ao invés de escrever uma biblioteca inteira para cookies nós mesmos, a vantagem doente de um pacote NPM chamado SF Cookies foi construído especificamente para lidar dando a projetos reagir acessar um navegador cookies para voltar para o terminal e executar NPM. Instalar cookies SF Agora precisamos pensar sobre quando realmente precisamos lidar com estrela e cookies quando adicionamos um lembrete. Bem, nós sempre lidamos com a mudança são lembretes em estado dentro de nossos redutores, por isso faz sentido para assar cookies e remover cookies sempre que adicionar um lembrete ou excluir ERM sob para que ele de volta para seus redutores índice ponto Js e vamos importar dois métodos de cookies SF. Eles cookies e lêem cookies de S F cookies. E esses métodos são gosto de serpente ao invés de camelo, quando você tem este sublinhado separando-o em vez de uma letra maiúscula. Agora está em uma chamada para o Big Cookie no nosso caso de lembrete de anúncios. Então vamos remover este conselho não longa declaração. E vamos apenas dizer que queremos aumentar o cookie e isso tem dois parâmetros. O primeiro parâmetro é a bandeira real vai querer que você Baker cozinhando em. E então é o objeto JavaScript ou matriz que queremos iniciar. Então grande biscoito de lembretes são lembretes tudo bem. Agora isso deve ser suficiente para adicionar o cookie de lembrete ao nosso navegador. No entanto, também queremos ler qualquer cookie que possamos ter salvo anteriormente em sua última visita a este aplicativo. Então vamos adicionar uma chamada para ler cookie de lembretes no início do nosso produtor. Então, vamos dizer que nosso estado é igual a ler Cookie of Reminders para que isso irá inicializar em vez de uma matriz NT. Tudo o que temos armazenado na leitura Cookie of Reminders. Legal, vamos preparar tudo. Então vá em frente e não guarde nada para aparecer ainda. Mas assim que eu adicionar algo novo como ir às compras de supermercado com uma data de vencimento de sexta-feira a 20 em uma PM, ele diz ir às compras de supermercado em seis dias, alguns vão atualizar boom, e ainda está lá. Ótima. Então agora que vemos lembretes trabalhando depois de um fresco grátis. Agora só precisamos armazenar um excluído, um lembrete como excluído sempre que excluímos. E é simples assim. Vamos ter outra chamada de biscoito grande com a mesma bandeira de lembretes. Também assar nossos novos lembretes. Então estamos passando são atualizados uma chuva e ele apenas substitui o biscoito que foi armazenado anteriormente. Eu vou em frente e bater. Salvar. Vai recarregar. Aqui ainda temos um lembrete. Vamos excluí-lo agora como uma recarga e ele ainda está desaparecido. Ótima. Agora que vemos isso funcionando, vamos adicionar mais um recurso. Que tal tentar limpar todos os lembretes de uma vez? Vejo vocês no próximo vídeo. 14. Limpando todos os lembretes: Vamos adicionar mais um recurso a este aplicativo, um botão, que permite que um usuário crie todos os seus lembretes de um só gole. Vamos abordar a sua lógica de redux primeiro. Lembre-se de que sempre que adicionamos novas funcionalidades ao nosso aplicativo Redux, abordamo-lo em três etapas. Para o primeiro passo. Vamos adicionar uma nova constante para as constantes dot Js fuck. Vamos exportar uma nova constante chamada lembretes claros em vez de lembretes iguais a claros . Vamos para nossas ações Index Duchess and Export, um novo criador de ação chamado Limpar Lembretes. exportação causou lembretes. Certifique-se de que temos a função seta definida. E com este velho, não precisaremos passar nenhum dado. Vamos apenas retornar em ação ou objeto JavaScript simples com o tipo limpar lembretes. Agora, é claro, precisamos ter certeza de que importamos lembretes claros de nossas constantes inundações fodidas. Adicionar lembretes de Constance, e então teremos retornado objeto cujo tipo é claro lembretes ano por meses agora, vamos ter que alterar nossos lembretes redutor teve que indexar tais s de produtores. Vamos importar lembretes claros, primeiro lugar, e então vamos alterar nosso redutor para lidar com mais um caso. Lembretes claros. Vamos definir lembretes para uma matriz vazia. E então faremos nosso biscoito mais uma vez com nossos lembretes, bandeira e lembretes. Então, dessa forma, ele fica armazenado nunca re lembretes claros. E então precisamos retornar esses lembretes. Ótimo, vamos economizar. E no botão JSX que vai chamar são lembretes claros. Na verdade, esqueça que tive que agir com a cabeça de sexo para a função de renderização. E depois deste ponto renderizar lembretes irá adicionar um novo elemento DIV. Seu nome classe será TTN e perigo botão, que fecha a cor para vermelho e em Click. Vamos simplesmente chamar isso de props stop, lembretes não claros e no texto. Bem, basta escrever lembretes claros. Agora, antes que isso funcione, precisamos nos certificar de que vinculamos esse criador de ação aos nossos adereços. Então é adicionado ao lado de excluir lembrete na parte inferior da nossa função de conexão, claro de unders e na parte superior. Vou verificar se realmente importamos lembretes claros de ações e ainda não o fizemos, então vamos em frente e importar lembretes claros de ações. Vamos economizar e testar. Então, há o botão de lembretes nucleares. Digamos que eu tenha que ir às compras, claro, no dia 18 12. Então isso é um lembrete. Digamos que tenho que ir pescar com Tom. Não sei quem Thomas, mas parece que ele quer ir pescar. Então vamos dizer que vamos fazer isso no dia 31 e uma última coisa. Digamos que tenho que visitar o dentista. Corra e vamos em frente e limpar os lembretes e eles estão todos desaparecidos e não é recarregar. Chega de lembretes. Magnífico. Tudo está funcionando, e acabamos de completar nossa primeira aplicação Redox. Parabéns. Espero que isso ajude a lançar alguma luz sobre a biblioteca, por vezes complexa, de Redux. Realmente não se sente muito complicado quando você se lembra de pensar sobre isso em três passos de ter uma constante e ação em ação. Criador no redutor Todos para armazenar são um objeto de estado gigante que aprendemos muito mais sobre Reagir, aprendemos alguns truques novos e, claro, tudo sobre a Biblioteca Redox. Ao testar Building Reminder, há uma parte de resumo e desafios em seguida, e chegando. Temos todo um outro trabalho de defesa redux toe através, e desta vez ele irá incluir autenticação em um servidor. Mal posso esperar para começar a revestir com você. Lá