📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Le reducer, c'est quoi ?

Le reducer est une fonction qui permet de mettre à jour l'état d'une application de manière contrôlée. Il s'agit d'un concept central dans NgRx et d'autres bibliothèques de gestion d'état réactif. Le reducer prend en entrée l'état actuel de l'application et une action, et renvoie un nouvel état mis à jour en fonction de l'action.

Un reducer NgRx est généralement implémenté en utilisant une fonction de type (state: S, action: A) => S, où S est le type de l'état et A est le type des actions. La fonction prend en entrée l'état actuel de l'application et une action, et renvoie un nouvel état mis à jour en fonction de l'action.

Voici un exemple simple d'un reducer NgRx pour un compteur :

ts
import * as counterActions from './actions/counter';

export function reducer(state: number = 0, action: counterActions.Actions): number {
  switch (action.type) {
    case counterActions.INCREMENT:
      return state + 1;
    case counterActions.DECREMENT:
      return state - 1;
    default:
      return state;
  }
}

Dans cet exemple, le reducer gère deux actions : INCREMENT et DECREMENT, qui incrémentent ou décrémentent le compteur en fonction de l'action. Si l'action n'est pas gérée par le reducer, le reducer renvoie l'état actuel inchangé.

Le reducer est associé à un état dans le store NgRx en utilisant la méthode StoreModule.forRoot() :

ts
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@ngrx/store';

import { AppComponent } from './app.component';
import { reducer } from './reducer';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({ counter: reducer })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dans cet exemple, le reducer est associé à l'état counter dans le store NgRx. Lorsque le store reçoit une action, il utilise le reducer associé à l'état pour mettre à jour l'état en conséquence.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !