React Academy · Aula

Criando seu primeiro armazenamento Zustand

Defina um armazenamento com create(), adicione partes de estado e ações e consuma-o com useStore.

Criando seu primeiro armazenamento Zustand é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você criará seu primeiro store do Zustand com create(), definirá fatias de estado e ações e usará o store em componentes React.

O que é Zustand?

Zustand é uma biblioteca minimalista e sem abordagem prescritiva para gerenciamento de estado. Um store é um objeto JavaScript simples com estado e funções. Os componentes se inscrevem nele por meio de um hook. Sem provedores, redutores ou código repetitivo.

Instalação

Instale o Zustand. Ele não possui dependências entre pares.

npm install zustand

Criando um store

Chame create() com uma função que retorne o estado inicial e as ações. A função recebe um auxiliar `set` para atualizar o estado.

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Usando o store em um componente

Chame o hook do store em qualquer componente para acessar o estado e as ações. Não é necessário envolver o componente em um Provider.

function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Sintaxe do seletor

Passe uma função seletora ao hook do store para se inscrever somente na fatia de que você precisa. O componente só será renderizado novamente quando o valor selecionado mudar.

const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Atualizando o estado com set

A função `set` combina superficialmente os novos valores com o store. Você pode passar um objeto ou uma função que receba o estado atual e retorne atualizações parciais.

set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Ações assíncronas

As ações podem ser assíncronas. Chame set depois de aguardar os dados. Não há necessidade de uma camada intermediária: basta escrever funções assíncronas comuns.

const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Atualizações de estado aninhado

Para objetos aninhados, espalhe manualmente o nível externo ou use a camada intermediária immer para mutações profundas. Por padrão, set combina apenas as chaves do nível superior.

set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Lendo o store fora do React

Acesse o estado do store fora de um componente com getState() e inscreva-se nas alterações com subscribe(). Isso é útil para testes e para código que não usa React.

const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Verificação rápida

Em um store do Zustand, o que a função set faz?

Recapitulação

Crie um store do Zustand com create((set) => ({ state, actions })). Use a sintaxe de seletores nos componentes para se inscrever em fatias. As ações chamam set() para atualizar o estado. Funciona de forma assíncrona e fora do React com getState().

A seguir

Próxima lição: **Seletores e prevenção de renderizações desnecessárias** — você extrairá fatias específicas do estado para que os componentes só sejam renderizados novamente quando necessário.

Perguntas Frequentes

A aula “Criando seu primeiro armazenamento Zustand” é grátis?

Sim — o texto completo de “Criando seu primeiro armazenamento Zustand” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Criando seu primeiro armazenamento Zustand”?

Defina um armazenamento com create(), adicione partes de estado e ações e consuma-o com useStore. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Criando seu primeiro armazenamento Zustand”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Criando seu primeiro armazenamento Zustand
Seletores e prevenção de novas renderizações desnecessárias
Persistindo o estado com o middleware persist
DevTools do Zustand e testes de armazenamentos

← Voltar para React Academy