SvelteKit: trabalhando com store

Criando uma Store - Apresentação

Olá. Meu nome é Antônio Evaldo e sou instrutor na escola de FrontEnd da Alura. Estou muito feliz de ter você aqui comigo nesse segundo curso de SvelteKit. E se você não sabe, esse curso é a continuação de outro curso de SvelteKit da Alura onde desenvolvemos a primeira página do Alura Cook.

Estou com ele aberto no design do Figma. Fizemos essa primeira página inteira e vimos um monte de coisas. O que vamos fazer nesse segundo curso é pegar esse projeto que já está feito a primeira página e terminar de implementar ele na segunda página. Vamos justamente implementar a página de receitas mostrando quais receitas conseguimos fazer com os ingredientes que temos.

Mas não só essa parte visual que vamos fazer nesse segundo curso, também vamos nos aprofundar em Store, a Store do Svelte que significa estado global porque temos alguns componentes que estão sendo compartilhados em ambas as páginas. Então vamos ver muita coisa legal disso também.

Também vamos ver mais algumas coisas de navegação entre essas rotas. Deixa eu te mostrar a versão final da aplicação no navegador. Estou mostrando a versão final do Alura Cook. A primeira página não mudou muita coisa. Vou só selecionar alguns itens para a lista. A única coisa que mudou nessa primeira página foi que adicionei um “x”, um texto de remover em cada ingrediente da lista e conseguimos remover eles.

Mas vamos para a segunda página. Primeiro vou selecionar os ingredientes chocolate e chantilly e agora clico no botão de "Buscar receitas" e vamos para a segunda página que agora está completa e mostra quais receitas conseguimos fazer com os nossos ingredientes. Nesse caso, consigo fazer apenas o Milkshake de chocolate. Está bem legal.

Posso clicar no botão de "Editar lista" e volto para a primeira página. E uma coisa super bacana também desse projeto, é que não sei se você percebeu, mas ele está com um link, um domínio na internet mesmo, que no caso é “alura-cook.vercel.app”. Realmente é um domínio da internet que podemos mandar para qualquer pessoa acessar e ver o que fizemos.

Só que o seu vai ser um pouco diferente do link que está aparecendo para mim. Mas isso é muito legal e você vai aprender como publicar a sua aplicação também. Então é isso que vamos ver nesse segundo curso de SvelteKit. Estou muito ansioso e te espero lá.

Criando uma Store - __Layout

Vamos desenvolver a segunda página da nossa aplicação. Estou no design do Figma e poderíamos começar desenvolvendo ela chamando o cabeçalho novamente, tem a parte da lista que também se repete e vendo até os elementos que estão em comum entre as duas páginas, também temos o rodapé.

Se formos no VSCode, no “index.svelte”, você já sabe que estamos chamando os componentes de cabeçalho e esses outros que acabei de mencionar. Então se eu abrir “receitas.svelte”, poderia chamar esses componentes novamente.

Só que não são só esses componentes que se repetem, também temos alguns estilos que se repetem, como, por exemplo, na <div class=“container-principal”>, <div class=“estilo-principal”>. E pensando nisso, o SvelteKit fornece um recurso, uma solução elegante para compartilharmos elementos entre as duas páginas ou até entre todas as páginas da nossa aplicação.

O recurso é o seguinte, dentro da pasta “routes” vou criar um arquivo chamado "__layout.svelte". Esse é um arquivo especial do SvelteKit. Como acabamos de criar ele, é interessante até reiniciarmos o servidor. Vou abrir o terminal integrado do VSCode, dar "Ctrl + C" algumas vezes e executar ele novamente para ele reconhecer que acabamos de criar a aplicação.

Acabou de abrir para mim e ficou em branco. O que foi que fiz? Só de eu ter criado o arquivo, a minha aplicação ficou sem nenhum componente. Está pegando só os estilos do “app.css”, os estilos globais. O que foi que aconteceu? Vamos no VSCode. O que acontece é que quando o arquivo “__layout.svelte” existe, ele se torna a base da nossa aplicação.

Então como ele está em branco, a nossa aplicação vai ficar em branco também. Para fazer a nossa aplicação voltar do jeito que estava antes, precisamos colocar o slot do Svelte, <slot></slot>. Só de fazer isso, salvar o arquivo e voltar no navegador, já voltou a funcionar. "Antônio, ainda não entendi como foi que isso aconteceu. O que foi que acabou de acontecer?"

Porque esse slot em específico, o slot do “__layout.svelte” vai ser substituído pela rota que estamos acessando. Então no lugar do slot vai ser colocado “index.svelte” ou “receitas.svelte”, depende da URL que estamos acessando. A coisa mais legal do “__layout.svelte” é que tudo o que colocarmos vai ser compartilhado entre ambas as páginas do nosso projeto.

Então se eu colocar, por exemplo, aaaaaaaa na primeira linha e salvar o arquivo, volto ao navegador e está aparecendo aaaaaaaa no início da primeira página, o “index.svelte”. E se for clicar no botão "Buscar receitas" e for para a página de “receitas.svelte” no navegador, vai estar lá o “aaaaaaaa” também. Então esse é um recurso muito legal do SvelteKit.

Vou voltar para a página principal, voltar para o VSCode e apagar o aaaaaaaa. Você talvez até esteja imaginando como vamos utilizar esse recurso. Vamos colocar o cabeçalho, o rodapé e os elementos que se repetem no “__layout.svelte”. Então vou fazer isso agora. Vou no “index.svelte”. Vou até começar copiando a div class=“container-principal”> junto com '<Cabecalho />'.

Dou "Ctrl + X" neles, tirar a </div> de fechamento e colocar em “__layout.svelte”, <div class="container-principal"> <Cabecalho /> e fechar a <div>, <div class="container-principal"> <Cabecalho /> </div>. No final dessa <div>, dentro dela, vou colocar o rodapé do “index.svelte”. Acabei de tirar de lá e colocar no “__layout.svelte” dentro do container-principal, <div class="container-principal"> <Cabecalho /> <Rodape /> </div>.

E volto para o “index.svelte” e tem mais uma <div> que quero pegar que é a da classe estilo-principal. Tiro ela do “index.svelte” e coloco ela no “__layout.svelte” entre o cabeçalho e rodapé, <div class="container-principal"> <Cabecalho /> <div class="estilo-principal"> <Rodape /></div>. Coloquei ela e fechei. Dentro desse estilo-principal vou colocar o <slot></slot> do “__layout.svelte”, <div class="container-principal"> <Cabecalho /> <div class="estilo-principal"> <slot></slot> <Rodape /> </div>.

Falta importarmos os componentes de cabeçalho e de rodapé. Estou pedindo para o VSCode fazer o auto import para mim. Vou dar um "Alt + Shift + F" para formatar o documento. Uma coisa interessante aconteceu quando formatei o documento, é que o slot ficou com uma tag de autofechamento porque para o Svelte, ele entende que quando temos uma tag de abertura e fechamento sem nenhum conteúdo, ele entende que é equivalente a uma tag de autofechamento. É só uma curiosidade.

Salvo esse arquivo. Falta alguns estilos do CSS que deixei no “index.svelte” referente as “divs” que copiei. Vou pegar esses estilos, dou um "Ctrl + X" neles, salvo o “index.svelte”, volto para “__layout.svelte”, crio a tag <style> </style> e dou um "Ctrl + V" no estilos do .container-principal e do .estilo-principal.

Se eu salvar o arquivo e voltar ao navegador, a aplicação continua funcionando perfeitamente. Mas o mais legal é que se eu for para a página de receitas, já está lá aparecendo o cabeçalho e o rodapé. Então esse é um recurso bem legal do SvelteKit. Vamos voltar agora para o design do Figma. A próxima parte que se repete é a minha lista ou a sua lista de ingredientes.

Vamos lá para o “index.svelte” e vou até aproveitar para tirar esses imports que não estou mais utilizando e vou até organizar os imports dos componentes para ficar juntos um dos outros. Vou até deixar o import categorias from ‘$ib/json/categorias/json’; separado. Só para ficar mais organizado. O que quero refletir com você é o seguinte, é no “index.svelte” que está o estado minhaLista e também as funções adicionarIngrediente e removerIngrediente.

Ela estando aqui, o componente minhaLista consegue ter acesso a esse dado. Só que também quero que ele apareça no “receitas.svelte”. Então teria que tirar essa minhaLista e colocar em “]__layout.svelte”. Vou até fazer isso, dar um "Ctrl + X" só para você ver como vai ficar. Se eu colocar em “__layout.svelte”, na tag <script>, vou colocar também o atributo <script lang="ts">.

Vou dar um "Alt + Shift + F" e ficou em “__layout.svelte”. No “index.svelte” perdemos o acesso a lista. Será que tem como passar a minhaLista que agora está no “__layout.svelte” como “prop” para as rotas? Não tinha dito que as rotas vão substituir o <slot>? Será que tem como passar como “prop” para o <slot>? Infelizmente não. O <slot> do Svelte até tem “prop”, só que ela funciona de uma forma diferente das “props” que já conhecemos.

Então essa infelizmente não é uma solução que vai servir para nós. Vou até dar um "Ctrl + Z" nessas partes que tinha feito. Vou até deixar o atributo <script lang= “ts”> do “__layout.svelte”. Mas vou deixar do jeito que estava antes, salvo o arquivo. Volto para o “index.svelte” e dar um "Ctrl + Z" para manter a lista lá. Também vou dar um "Alt + Shift + F" só para dar uma formatada no documento e salvar o arquivo.

Então já que aquela solução de colocar no “__layout.svelte” não funciona, será que tem alguma que vai nos ajudar? Tem e é uma solução bem elegante que vai fazer com que o nosso estado minhaLista fique bem mais acessível, bem mais visível para todos os componentes e rotas da nossa aplicação. Vou explorar essa solução contigo no próximo vídeo. Vem comigo que vai ser bem legal.

Criando uma Store - Criando uma Store

Precisamos encontrar uma solução que deixa o estado minhaLista muito mais acessível, muito mais visível para os componentes e rotas da nossa aplicação. Quero tornar esse estado global. Ou como podemos dizer no Svelte, quero que ele seja uma Store que é a mesma coisa que estado global no Svelte.

Para criar uma Store, primeiro vou dentro da pasta “lib” e criar uma nova pasta chamada “stores”. Dentro dessa pasta, vou criar um arquivo chamado “minhaLista.ts” porque “minhaLista” é o nome da Store que quero criar. Dentro desse arquivo vou escrever, export const minhaLista = writable. Até usei o auto import do VSCode para importar “writable” de “svelte/store”.

Abro e fecho os parênteses desse “writable” para executar ele, export const minhaLista = writable(). “Writable” é uma função que pode ser traduzida como "escrevível" ou "gravável" do inglês. Isso significa que a Store pode ter o valor alterado ao longo da aplicação, que realmente é o que quero. Posso adicionar ou remover itens da “minhaLista”.

E dentro dos parênteses do writable, passamos o valor inicial da Store que vai ser uma lista vazia, export const minhaLIsta = writable([]);. Também vou aproveitar e utilizar generics do TypeScript logo antes dos parênteses do “writable” e dizer qual o tipo de dado que essa Store vai carregar. Então escrevo string e abro e fecho colchetes, export const minhaLista = writable<string[]>([]);.

Salvando o arquivo. Só de fazer isso, já criei a Store e ela já está disponível para todos os componentes utilizarem ela. Então vamos fazer isso no “index.svelte”. Você pode apagar sem medo o estado let minhaLista: string[] = [];. Então apago e no lugar dele vou escrever, import minhaLIsta, só que agora vou fazer o auto import do arquivo que acabamos de criar.

Beleza, importei a lista, import { minhaLista } from "$lib/stores/minhaLista";, só que o VSCode já está apitando erro nos locais que estamos utilizando minhaLista. Vou escolher qualquer minhaLista para passar o cursor por cima e vejo que o tipo dela é writable com generics string. A minhaLista é a Store completa, ela tem um monte de métodos internos que vamos ver até com mais calma depois.

Mas estou interessado no dado que ela carrega que é justamente a lista de gradientes, a lista de strings. Para acessar esses dados, a forma que o Svelte disponibiliza para nós de uma forma bem prática, aliás, é escrevendo o sinal de dólar logo antes de minhaLista. E coloquei no primeiro que apareceu e o sublinhado vermelho já sumiu. Vou fazer isso em todos os outros locais que estou utilizando minhaLista.

Coloco o sinal de dólar no começo $minhaLista. Vou colocar mais duas vezes, uma dentro da função removerIngrediente onde estou utilizando minhaLista, no bloco {#if $minhaLista.lenght} do Svelte também tem mais uma vez que estou utilizando lá e na “prop” ingredientes do componente MinhaLista também estou utilizando minhaLista e vou colocar o sinal de dólar no começo, $minhaLista.

Só de fazer isso, salvar o arquivo, volto ao navegador e vamos ver se continua funcionando igual. Clico em ovos, queijo e leite e estão sendo adicionamos e vou clicar de novo para remover e foram removidos com sucesso. Já estamos utilizando a “Store” do Svelte que, inclusive, nem é um recurso exclusivo do SvelteKit, ele vem do Svelte mesmo, o puro.

Voltando para o VSCode, tem um monte de coisas acontecendo por baixo dos panos quando utilizamos esse sinal de dólar. Dentro da função adicionarIngrediente, por exemplo, estamos tanto acessando a minhaLista quanto atribuindo novo valor para ela. E realmente quando utilizamos esse sinal de dólar, também estamos adicionando reatividade para a nossa Store, bem como o que acontece quando utilizamos um estado dentro de um componente do Svelte.

Quando ele tem o valor alterado, o componente já é renderizado. Da mesma forma acontece com a Store quando utilizamos esse sinal de dólar. Quando é alterado o Svelte entende que tem renderizar o componente. Então funciona como se fosse um estado. A diferença é que ele é global e está muito mais acessível. No próximo vídeo vamos fazer algumas refatorações no código que serão possíveis agora que estamos utilizando uma Store. Te espero lá.

Sobre o curso SvelteKit: trabalhando com store

O curso SvelteKit: trabalhando com store possui 108 minutos de vídeos, em um total de 46 atividades. Gostou? Conheça nossos outros cursos de Svelte em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Começando em store
• Avançando na store
• Componentizando mais
• Finalizando o Alura Cook
• Publicando o Alura Cook