Ações e redutores

Aprenda a gerenciar o estado em aplicações NgRx usando ações e redutores.

O que são ações?

As ações descrevem eventos ou operações específicos da sua aplicação, como carregar dados ou responder a interações do usuário.

Criando ações

Crie ações usando createAction():

export const login = createAction('[Login Page] Login');

Cargas úteis das ações

Envie dados com as ações usando uma carga útil:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Redutores

Os redutores tratam as transições de estado com base nas ações. Eles retornam novos estados sem alterar diretamente o estado existente.

Criando redutores

Use createReducer para definir como o estado é alterado:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Atualizando o estado

Os redutores devem sempre retornar novos objetos de estado. Nunca altere diretamente o estado existente.

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

Combinando redutores

Combine vários redutores em um único redutor raiz para gerenciar estados complexos:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

Resumo

Você aprendeu a criar ações e redutores para gerenciar o estado com eficiência no Angular usando o NgRx!