Angular Academy · Aula

Atualizando o estado de forma imutável

Aplique atualizações imutáveis ao estado dos sinais.

Atualizando o estado de forma imutável é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que a imutabilidade

Signals detectam mudanças por referência. Se você alterar um vetor ou objeto diretamente, a referência permanecerá a mesma e os signals computed() dependentes poderão não ser recalculados. Sempre produza uma referência nova.

A armadilha da mutação

Adicionar elementos a um vetor existente com push o altera sem mudar a referência. Evite isso.

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

Spread para vetores

Crie um novo vetor com o operador spread para que a referência mude e os consumidores sejam executados novamente.

// GOOD: new array reference
this._items.update(list => [...list, item]);

Removendo itens

Use filter(), que retorna um vetor completamente novo e deixa o original intacto.

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Atualizando um item

Use map() para retornar um novo vetor, espalhando o objeto correspondente em uma cópia nova para que a referência interna também mude.

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

Spread para objetos

Para o estado de um objeto, espalhe o objeto anterior e substitua os campos alterados. Objetos aninhados também precisam do próprio spread.

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

set com um valor novo

Ao substituir completamente o estado, usar set() com um objeto novo é naturalmente imutável, pois você fornece uma referência nova.

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

Por que computed depende disso

Como os modelos de leitura calculados dependem da referência do signal, as atualizações imutáveis garantem que eles sejam recalculados. Uma mutação que mantém a mesma referência do vetor pode deixar totais e filtros desatualizados silenciosamente.

Padrões auxiliares

Extraia pequenos auxiliares puros para transformações comuns, mantendo os métodos do armazenamento legíveis e consistentes.

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

Cuidado com aninhamentos profundos

Um estado profundamente aninhado exige muitos spreads. Se as atualizações se tornarem difíceis, simplifique a estrutura do estado ou divida-a em vários signals, para que cada atualização afete uma parte pequena.

A imutabilidade ajuda na depuração

Como cada atualização produz uma nova referência, pode comparar instantâneos ao longo do tempo, registrar o estado anterior e o seguinte e raciocinar sobre as alterações sem se preocupar com edições ocultas feitas diretamente no local.

Verificação rápida

Teste sua compreensão sobre atualizações imutáveis de sinais.

Recapitulação

Aprendeu padrões de atualização imutável: spread para arrays e objetos, map/filter para edições e remoções, novas referências com set e por que a igualdade de referências torna a imutabilidade essencial para uma reatividade correta.

Perguntas Frequentes

A aula “Atualizando o estado de forma imutável” é grátis?

Sim — o texto completo de “Atualizando o estado de forma imutável” é 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 Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Atualizando o estado de forma imutável”?

Aplique atualizações imutáveis ao estado dos sinais. Você pratica Angular 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 Angular Academy?

Nenhuma experiência prévia é necessária. Angular 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 3 de 4.

Quanto tempo leva a aula “Atualizando o estado de forma imutável”?

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 Angular Academy?

Sim. Cada aula de Angular 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

← Voltar para Angular Academy