React: implementando gestão de estado com Zustand

Zustand e Store - Apresentação

Olá, estudante! Boas-vindas a este curso de Zustand. Eu sou Monica Hillman, e serei a instrutora que guiará essa jornada de aprendizado.

Audiodescrição: Monica se identifica como uma mulher branca. Possui cabelos castanhos longos, com mechas loiras. No rosto, utiliza óculos de grau com armação prateada e piercing no septo nasal. No corpo, usa uma camiseta preta. Ao fundo, uma parede lisa, iluminada em tons de rosa e azul.

Conhecendo o projeto

Conheceremos mais sobre a biblioteca Zustand e a implementaremos no projeto Fokus. Isso permitirá que a pessoa usuária acesse a plataforma Fokus e defina o modo do cronômetro que deseja, entre Foco, Descanso curto e Descanso longo.

Essa alteração substituirá as cores da aplicação, o texto do cabeçalho, a imagem e o tempo dentro do cronômetro.

Testaremos a aplicação no modo Descanso curto. Ao clicar no botão "Começar", ele faz um alerta sonoro e visual. Quando o cronômetro chega a zero, há novamente um alerta visual e sonoro.

O que aprenderemos?

Para implementar essas alterações, aprenderemos a construir uma Store com a Zustand, na qual resgataremos o valor do estado global. Com essa Store, aprenderemos a utilizar um hook personalizado que será acessado em diversos componentes para acessar o estado global e também resgatar ou atualizar o valor.

Precisamos aprender isso, pois quanto maior o projeto desenvolvido, mais complicado se torna o compartilhamento de informações entre diversos componentes, visto que o comportamento padrão do React é permitir o compartilhamento apenas de elementos pais para filhos, e não entre elementos que não têm conexão entre si. A criação de uma funcionalidade que armazena o estado global e permite essa atualização facilitará nosso dia a dia dentro desse projeto.

Pré-requisitos

Antes de iniciar este curso, é importante ter conhecimentos em HTML, CSS e JavaScript, pois não entraremos em detalhes sobre essas tecnologias, e também entender um pouco sobre React, pois o projeto já será entregue pronto. Construiremos somente a implementação da biblioteca de gerenciamento de estados.

Conclusão

Se tiver interesse em conhecer mais sobre o Zustand, não deixe de acompanhar este curso. Nos vemos no próximo vídeo!

Zustand e Store - Instalando o Zustand e produzindo a store

Estamos desenvolvendo a plataforma Fokus, inspirada na técnica Pomodoro. Nela, podemos definir intervalos de tempo para trabalho, estudos e descansos. Esses períodos são divididos dentro da plataforma Fokus em três modos:

• Foco
• Descanso curto
• Descanso longo

Ao alterar esses modos, veremos mudanças na cor da aplicação, no texto, no cronômetro e na imagem.

Gerenciando estados de componentes separados

Para implementar essas mudanças simultâneas a partir de um clique que define o modo desejado, podemos colocar um estado no componente principal da página e enviá-lo para os elementos filhos.

No entanto, o cronômetro é um componente separado. Como poderíamos, então, ouvir o clique para a mudança de modo e afetar toda a tela, incluindo componentes que não são filhos diretos do componente do cronômetro? Isso seria um pouco complicado de fazer nativamente no React, mas podemos utilizar bibliotecas de gerenciamento de estado.

Essas bibliotecas nos permitem centralizar o gerenciamento de estados em um único arquivo, acessível por todos os componentes de maneira eficiente. Para este projeto, utilizaremos o Zustand.

Vamos começar instalando-o no projeto. Por meio do navegador, acessaremos o site da documentação do Zustand. O mascote é um urso estilizado, tocando violão na tela inicial, o que torna a temática da biblioteca bastante agradável.

A documentação está em inglês e explica que o Zustand é pequeno, rápido e escalável, com uma API baseada em hooks (ganchos). Apesar de ser simples de usar, é bastante eficiente.

Instalando o Zustand

Para instalar, utilizaremos o comando abaixo, encontrado na seção "Installation":

npm install zustand

Copiaremos esse comando, acessaremos o Visual Studio Code e abriremos o terminal, clicando em "Terminal > New Terminal" pela barra de menu superior. No terminal, colaremos e executaremos o comando para realizar a instalação.

Após a instalação feita com o Node Package Manager (NPM), poderemos utilizar todas as funcionalidades do Zustand.

Criando a Store do projeto

Conforme a documentação, o próximo passo é criar uma Store. Não podemos traduzir "store" para "loja", pois é um termo técnico utilizado em várias bibliotecas de gerenciamento de estado.

Na seção "First create a store", a documentação informa que uma Store é um hook onde podemos colocar variáveis primitivas, objetos, funções e uma função set para gerenciar ou unir esses estados.

Para construir a Store no projeto, acessaremos a aba do explorador de arquivos do VS Code, na lateral esquerda. Em seu interior, clicaremos com o botão direito na pasta "src" e selecionaremos "New Folder" para criar uma nova pasta chamada "store". Dentro dela, criaremos um arquivo index.js.

No interior do index.js, criaremos a Store com o seguinte código:

export const useCronometroStore = create((set) => ({
  
}));

Entre as chaves e parênteses, construiremos estados e funcionalidades do cronômetro.

Centralizando funcionalidades

A Store é onde armazenamos todas as funcionalidades da biblioteca de gerenciamento de estados para uso nos outros componentes. É como uma loja: se precisamos de algo, sabemos que podemos encontrar lá.

Da mesma forma, qualquer componente que precisar atualizar algo referente ao cronômetro poderá buscar na Store, de forma centralizada.

Próximos passos

Após instalar o Zustand e criar a estrutura da Store, continuaremos a sua criação.

Zustand e Store - Manipulando os modos do cronômetro na store

Instalamos a biblioteca de gerenciamento de estado no projeto, mas atualmente aplicação possui apenas um modo, o Foco. Para começar a desenvolver os outros modos, podemos criar um objeto dentro da Store que conterá as diferenças entre cada um desses modos.

Criando o objeto MODO_CRONOMETRO

Voltando ao Visual Studio Code, no interior do arquivo index.js da pasta "store", começaremos a construir o objeto export const MODO_CRONOMETRO, acima do useCronometroStore.

Entre suas chaves, haverá um bloco FOCO, e entre as chaves deste, haverá os seguintes valores:

• id, chamado "foco";
• nome, chamado "Foco";
• frase, que exibirá uma lista de duas frases:
  • "Otimize sua produtividade," e
  • "mergulhe no que importa.";
• tempoInicialEmSegundos, com o valor 30.

As frases foram recolhidas do Figma do projeto.

Abaixo do FOCO, adicionaremos o bloco DESCANSO_CURTO, e os seguintes valores entre chaves:

• id, chamado "descanso-curto";
• nome, chamado "Descanso curto";
• frase, que exibirá uma lista de duas frases:
  • "Que tal dar uma respirada?" e
  • "Faça uma pausa curta!";
• tempoInicialEmSegundos, com o valor 5.

Por fim, abaixo do DESCANSO_CURTO, haverá o bloco DESCANSO_LONGO, com os seguintes valores entre chaves:

• id, chamado "descanso-longo";
• nome, chamado "Descanso longo";
• frase, que exibirá uma lista de duas frases:
  • "Hora de voltar à superfície." e
  • "Faça uma pausa longa.";
• tempoInicialEmSegundos, com o valor 15.

index.js da pasta "store":

export const MODO_CRONOMETRO = {
    FOCO: {
        id: "foco",
        nome: "Foco",
        frase: ["Otimize sua produtividade,", "mergulhe no que importa."],
        tempoInicialEmSegundos: 30,
    },
    DESCANSO_CURTO: {
        id: "descanso-curto",
        nome: "Descanso curto",
        frase: ["Que tal dar uma respirada?", "Faça uma pausa curta."],
        tempoInicialEmSegundos: 5,
    },
    DESCANSO_LONGO: {
        id: "descanso-longo",
        nome: "Descanso longo",
        frase: ["Hora de voltar à superfície.", "Faça uma pausa longa."],
        tempoInicialEmSegundos: 15,
    },
}

export const useCronometroStore = create((set) => ({

}));

Com esses modos, já temos um certo controle, embora nada mude na tela. Apenas construímos uma variável para cada tipo de modo do cronômetro e todas as mudanças que serão necessárias quando definirmos qual queremos seguir.

Implementando o objeto na Store

Para implementar o objeto MODO_CRONOMETRO com essas diferenças dentro da Store, acessaremos o interior das chaves do useCronometroStore, e definiremos uma variável como modoCronometro, que receberá o MODO_CRONOMETRO, a partir do qual definiremos o modo inicial como FOCO, o primeiro item desse objeto.

Abaixo do modoCronometro, definiremos a variável tempoEmSegundos, que receberá o tempo inicial do modo Foco, MODO_CRONOMETRO.FOCO.tempoInicialEmSegundos.

export const useCronometroStore = create((set) => ({
    modoCronometro: MODO_CRONOMETRO.FOCO,
    tempoEmSegundos: MODO_CRONOMETRO.FOCO.tempoInicialEmSegundos,
}));

Quando chamarmos a Store, essas variáveis terão o valor de FOCO e seu tempo inicial de 30 segundos.

Atualizando o modo

Para criar uma funcionalidade que permita atualizar o modo, podemos construir um setModoCronometro abaixo das variáveis modoCronometro e tempoEmSegundos. Ele receberá uma função anônima com um par de parênteses, um igual, um sinal de maior e um par de chaves:

export const useCronometroStore = create((set) => ({
    modoCronometro: MODO_CRONOMETRO.FOCO,
    tempoEmSegundos: MODO_CRONOMETRO.FOCO.tempoInicialEmSegundos,
    
    setModoCronometro: () => {
    
    }
}));

Basicamente, estamos utilizando a mesma sintaxe do useState. Temos o estado MODO_CRONOMETRO, construído com determinado valor inicial, e estamos construindo uma funcionalidade para atualizar o MODO_CRONOMETRO.

Ela possui a sintaxe de set e o nome da variável, resultando em setModoCronometro. Como é uma função, ela recebe uma função anônima (arrow function), dentro da qual definiremos o que acontecerá.

Entre os parênteses da função anônima, queremos receber um novoModo, que será enviado no momento de chamar o setModoCronometro. Entre as chaves, utilizaremos o set(), adicionando um par de chaves entre seus parênteses.

Entre as chaves, utilizaremos o modoCronometro, substituindo o valor inicial pelo valor definido em novoModo. Faremos o mesmo com tempoEmSegundos, substituindo o valor inicial pelo valor definido em novoModo.tempoInicialEmSegundos.

export const useCronometroStore = create((set) => ({
    modoCronometro: MODO_CRONOMETRO.FOCO,
    tempoEmSegundos: MODO_CRONOMETRO.FOCO.tempoInicialEmSegundos,
    
    setModoCronometro: (novoModo) => {
        set({
            modoCronometro: novoModo,
            tempoEmSegundos: novoModo.tempoInicialEmSegundos,
        });
    },
}));

Conclusão e próximos passos

Dessa maneira, já definimos o modo e como atualizá-lo. No entanto, não basta apenas isso — precisamos integrar essas alterações com os componentes.

A seguir, faremos isso, enquanto entendemos mais sobre o gerenciamento de estados.

Sobre o curso React: implementando gestão de estado com Zustand

O curso React: implementando gestão de estado com Zustand possui 95 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de React 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:

• Zustand e Store
• Acessando estados globais
• Implementando novas funcionalidades
• Integrando estados com componentes
• Aprimorando a interatividade