ZUSTAND – Tutorial Completo Para Iniciante (100% Prático)

Neste artigo vamos aprender a utilizar o ZUSTAND através de um tutorial completo focado na prática e que desejam deixar seus projetos mais profissionais.

Atualmente, gerenciar estados globais em aplicações React é uma das tarefas mais complexas para nós programadores, principalmente quando o projeto começa a crescer em complexidade.

Ferramentas como Redux e Context API são amplamente utilizadas, mas muitas vezes apresentam desafios em termos de configuração, performance ou mesmo simplicidade.

Nesse contexto, o Zustand surge como uma alternativa mais leve e prática que pode simplificar o gerenciamento de estados globais em projetos React.

Vídeo Aula – Zustand

Para explicar de forma prática o Sujeito Programador fez um vídeo completo ensinando o passo a passo e todo fundamento por trás do Zustand. Assista a aula abaixo:

Confira os cursos completos de programação para iniciante do Sujeito Programador:

Curso Fábrica de APP Curso FullStack PRO

O que é Zustand?

Primeiramente vamos entender o que é o Zustand, que basicamente é uma biblioteca de gerenciamento de estado para React que permite criar e compartilhar estados globais de maneira simples e eficiente.

Ou seja, sua principal vantagem está na leveza e na simplicidade de implementação, além de proporcionar um código mais limpo e de fácil manutenção.

Diferente do Redux, que exige uma configuração mais extensa com Slices e Stores, o Zustand permite criar e gerenciar estados globais com muito menos esforço, sem comprometer a performance.

Como Funciona o Zustand?

Algo bem legal é que o Zustand utiliza uma abordagem baseada em hooks para criar e acessar estados globais.

Ou seja, em vez de passar propriedades entre componentes ou configurar um conjunto complexo de actions e reducers, o Zustand permite que qualquer componente em sua aplicação acesse e modifique estados diretamente da Store global.

Configuração Inicial do Zustand

Vamos iniciar configurando o Zustand em um projeto React. Suponha que estamos construindo uma lista de tarefas onde precisamos adicionar, remover e editar tarefas de maneira global.

Primeiro, instalamos o Zustand:

npm install zustand

Em seguida, configuramos a Store. Dentro do diretório src, criaremos uma pasta chamada store, onde armazenaremos nosso estado global.

O arquivo principal da Store pode ser chamado de taskStore.js:

import create from 'zustand';

const useTaskStore = create((set) => ({
    tasks: [],
    addTask: (task) => set((state) => ({
        tasks: [...state.tasks, { id: Date.now(), text: task }]
    })),
    removeTask: (id) => set((state) => ({
        tasks: state.tasks.filter(task => task.id !== id)
    })),
    editTask: (id, newText) => set((state) => ({
        tasks: state.tasks.map(task => task.id === id ? { ...task, text: newText } : task)
    }))
}));

export default useTaskStore;

Aqui, criamos uma Store que gerencia um array de tarefas (tasks). As funções addTask, removeTask, e editTask permitem manipular esse estado global diretamente.

Consumindo o Estado Global com Zustand

Após configurarmos a Store, podemos consumi-la em qualquer componente da nossa aplicação React. Vamos começar criando um simples componente de lista de tarefas:

import React, { useState } from 'react';
import useTaskStore from './store/taskStore';

const TaskList = () => {
    const { tasks, addTask, removeTask, editTask } = useTaskStore();
    const [newTask, setNewTask] = useState('');

    const handleAddTask = () => {
        if (newTask.trim()) {
            addTask(newTask);
            setNewTask('');
        }
    };

    return (
        <div>
            <h1>Lista de Tarefas</h1>
            <input
                type="text"
                value={newTask}
                onChange={(e) => setNewTask(e.target.value)}
            />
            <button onClick={handleAddTask}>Adicionar Tarefa</button>
            <ul>
                {tasks.map((task) => (
                    <li key={task.id}>
                        {task.text}
                        <button onClick={() => removeTask(task.id)}>Remover</button>
                        <button onClick={() => editTask(task.id, prompt('Novo nome:', task.text))}>Editar</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TaskList;

Nesse componente, utilizamos o hook useTaskStore para acessar as tarefas globais e as funções de adicionar, remover e editar tarefas.

Perceba como o Zustand facilita o acesso ao estado global em qualquer componente sem necessidade de passar dados via propriedades entre componentes filhos e pais.

Vantagens do Zustand sobre Redux e Context API

Uma das principais vantagens do Zustand é sua simplicidade. O Redux, embora poderoso, é muitas vezes criticado por sua complexidade de configuração.

Para projetos que não exigem um fluxo de dados altamente estruturado, o Redux pode ser excessivo.

O Zustand, por outro lado, oferece uma maneira simples de compartilhar estados globais sem o peso adicional de configuradores complexos como actions, reducers e middlewares.

Além disso, o Zustand supera o Context API quando o assunto é performance. O Context API funciona bem para estados menos complexos, mas em casos onde múltiplos componentes precisam acessar o estado frequentemente, ele pode apresentar problemas de re-renderização desnecessária.

O Zustand lida com essas situações de maneira mais eficiente, garantindo que apenas os componentes que realmente precisam ser atualizados sejam re-renderizados.

Estado Global em Aplicações Reais

Em uma aplicação real, como um e-commerce, podemos usar o Zustand para gerenciar estados como o carrinho de compras.

Em vez de passar dados entre múltiplos componentes como header, sidebar e páginas de produto, o Zustand permite que todos esses componentes acessem o mesmo estado global do carrinho, refletindo alterações em tempo real sem esforços adicionais.

Imagine uma situação onde o número de itens no carrinho de compras precisa ser exibido em várias partes da interface.

Com Zustand, qualquer componente pode acessar e modificar o estado global do carrinho diretamente da Store, sem necessidade de passar dados manualmente entre componentes, o que simplifica significativamente o fluxo de dados.

Conclusão – Zustand

O Zustand é uma excelente escolha para desenvolvedores React que buscam uma solução simples, mas poderosa, para gerenciamento de estados globais. Com uma configuração minimalista e performance otimizada, ele oferece uma maneira eficiente de gerenciar estados em aplicações de pequeno a médio porte. Seja em projetos simples ou em cenários onde estados globais precisam ser compartilhados entre múltiplos componentes, o Zustand se destaca como uma alternativa robusta e amigável em comparação a soluções mais complexas como Redux.

Se você está construindo projetos com React ou React Native e deseja uma maneira mais simples de gerenciar estados globais, experimente o Zustand e veja como ele pode facilitar seu desenvolvimento e manutenção de código.

Para aprender mais sobre programação recomendo dar uma conferida nos cursos do Sujeito Programador que ensina tudo que você precisa para entrar no mercado da programação.

Clique no botão abaixo e faça sua inscrição:

Curso Fábrica de APP Curso FullStack PRO

Espero que tenha gostado do conteúdo.

Um forte abraço!

Tags: tutorial zustand | zustand | zustand tutorial