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 :

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;
  }
}

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() :

// 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 { }

// 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.

Le reducer, c'est quoi ? ​

Le reducer, c'est quoi ?