Fundamentos do NgRx Store

Nesta lição, você conhecerá o NgRx, uma solução avançada de gerenciamento de estado para aplicações Angular.

O que é o NgRx?

O NgRx é inspirado no Redux e ajuda a gerenciar o estado de forma centralizada em aplicações Angular, simplificando o tratamento de dados entre os componentes.

Por que usar o NgRx?

• Gerenciamento de estado centralizado
• Fluxo de dados claro e previsível
• Depuração e testes mais fáceis

Conceitos fundamentais

O NgRx envolve conceitos importantes:

• Store: armazena o estado da aplicação
• Ações: descrevem eventos
• Redutores: tratam as transições de estado
• Seletores: recuperam dados do estado

Instalando o NgRx Store

Instale o NgRx usando o npm:

npm install @ngrx/store --save

Criando um Store

Defina o Store no módulo da sua aplicação:

StoreModule.forRoot({ appState: appReducer })

Criando ações

As ações definem eventos na sua aplicação:

export const loadData = createAction('[App] Load Data');

Redutores

Os redutores tratam as alterações de estado respondendo às ações e produzindo um novo estado:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

Resumo

Você aprendeu os fundamentos do uso do NgRx Store para gerenciar o estado da sua aplicação com eficiência. Muito bem!