Actions et reducers

Découvrez la gestion de l’état dans les applications NgRx à l’aide des actions et des reducers.

Que sont les actions ?

Les actions décrivent des événements ou des opérations uniques dans votre application, comme le chargement de données ou les interactions de l’utilisateur.

Créer des actions

Créez des actions avec createAction() :

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

Charges utiles des actions

Transmettez des données avec les actions à l’aide d’une charge utile :

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

Reducers

Les reducers gèrent les transitions d’état en fonction des actions. Ils renvoient de nouveaux états sans modifier directement l’état existant.

Créer des reducers

Utilisez createReducer pour définir la manière dont l’état évolue :

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

Mettre à jour l’état

Les reducers doivent toujours renvoyer de nouveaux objets d’état. Ne modifiez jamais directement l’état existant.

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

Combiner les reducers

Combinez plusieurs reducers en un reducer racine pour gérer des états complexes :

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

Résumé

Vous avez appris à créer des actions et des reducers pour gérer efficacement l’état dans Angular avec NgRx !