rxMethod para operações assíncronas
Gerencie fluxos assíncronos com rxMethod.
rxMethod para operações assíncronas é 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.
Assíncrono no SignalStore
Muitas ações são assíncronas: carregar dados, fazer pesquisas com debounce e realizar sondagens periódicas. O SignalStore oferece rxMethod para gerenciar esses fluxos assíncronos reativos e canceláveis.
Noções básicas de rxMethod
rxMethod cria um método apoiado por um pipeline do RxJS. Você o chama com um valor (ou um sinal/Observable), e esse valor é enviado para o fluxo.
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';
withMethods((store, api = inject(Api)) => ({
load: rxMethod<string>(pipe(
switchMap(id => api.getById(id)),
tap(item => patchState(store, { current: item }))
))
}))Chamando rxMethod
Invoque-o como um método normal, com um valor simples. O valor entra no pipeline que você definiu.
store.load('42');Passando um sinal
Você pode passar um sinal para um rxMethod. Ele executa novamente o pipeline automaticamente sempre que o sinal muda, sendo perfeito para carregamentos reativos.
selectedId = signal('1');
ngOnInit() {
this.store.load(this.selectedId); // reloads when selectedId changes
}switchMap cancela o trabalho obsoleto
Usar switchMap significa que uma nova emissão cancela a solicitação anterior em andamento. Isso evita condições de corrida nas quais uma resposta antiga e lenta sobrescreve uma resposta mais recente.
Acompanhando o estado de carregamento
Defina uma indicação de carregamento no início e limpe-a ao concluir, para que a interface possa exibir indicadores de carregamento.
load: rxMethod<string>(pipe(
tap(() => patchState(store, { loading: true })),
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, loading: false }))
))
))Tratamento de erros
Os erros precisam ser tratados dentro do pipeline; caso contrário, o fluxo é concluído e o método para de funcionar. Use catchError dentro do Observable interno.
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, error: null })),
catchError(err => {
patchState(store, { error: err.message, loading: false });
return EMPTY;
})
))Pesquisa com debounce
Combine operadores baseados em tempo para a pesquisa conforme o usuário digita. O pipeline aplica debounce e alterna entre solicitações, assim como no RxJS comum.
search: rxMethod<string>(pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => api.search(q)),
tap(results => patchState(store, { results }))
))Escolhendo o operador de achatamento
Use switchMap para cancelar trabalhos obsoletos, concatMap para enfileirar, mergeMap para executar em paralelo e exhaustMap para ignorar novas chamadas enquanto houver uma em andamento. Escolha com base na simultaneidade desejada.
Limpeza automática
A assinatura do pipeline está vinculada ao ciclo de vida do armazenamento. Quando o armazenamento é destruído (se estiver no escopo de um componente), o fluxo é desfeito, portanto não há vazamentos nem necessidade de cancelar a assinatura manualmente.
Inicializando na criação
Combine rxMethod com a funcionalidade withHooks para disparar um carregamento inicial quando o armazenamento for criado.
withHooks({
onInit(store) { store.load('initial'); }
})Verificação rápida
Verifique seus conhecimentos sobre rxMethod.
Recapitulação
Você usou rxMethod para fluxos assíncronos: chamou-o com valores ou sinais, escolheu um operador de achatamento (switchMap para cancelar trabalhos obsoletos), acompanhou o carregamento, tratou erros com catchError e contou com a limpeza automática das assinaturas.
Perguntas Frequentes
A aula “rxMethod para operações assíncronas” é grátis?
Sim — o texto completo de “rxMethod para operações assíncronas” é 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 “rxMethod para operações assíncronas”?
Gerencie fluxos assíncronos com rxMethod. 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 “rxMethod para operações assíncronas”?
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
- Criando um SignalStore
- Computed e métodos
- rxMethod para operações assíncronas
- Entidades e funcionalidades personalizadas