import { createReducer, on } from '@ngrx/store';

import { login, logout } from '../actions/auth.actions';

import { AuthState } from '../models/auth.models';

export const initialAuthState: AuthState = {

  token: null,

  isAuthenticated: false,

  user: null,

};

export const authReducer = createReducer(

  initialAuthState,

  on(login, (state, { token, user }) => ({

    ...state,

    token,

    isAuthenticated: true,

    user,

  })),

  on(logout, (state) => ({

    ...state,

    token: null,

    isAuthenticated: false,

    user: null,

  }))

);

Die on-Funktion ist eine Funktion aus dem NgRx-Framework, genauer gesagt aus dem @ngrx/store-Paket. Sie wird verwendet, um Reducer-Fälle zu definieren, die auf bestimmte Aktionen reagieren sollen. Hier ist eine detaillierte Erklärung:

Funktion der on-Funktion

Die on-Funktion wird verwendet, um die Reducer-Fälle zu definieren, die spezifischen Aktionstypen entsprechen. Ein Reducer in NgRx ist eine Funktion, die den aktuellen Zustand einer bestimmten Domäne (wie z.B. der Authentifizierung) modifiziert, basierend auf den Aktionen, die im Store ausgelöst werden.

Syntax und Verwendung

Die on-Funktion hat die folgende Syntax:

typescript

Copy code

on(actionCreator, reducerFunction)


• actionCreator: Dies ist die Aktion, auf die der Reducer reagieren soll. In NgRx wird eine Aktion normalerweise mit createAction erstellt.
• reducerFunction: Diese Funktion wird aufgerufen, wenn die spezifizierte Aktion im Store ausgelöst wird. Sie erhält den aktuellen Zustand und die Aktion als Parameter und gibt den neuen Zustand zurück.

Beispiel

Hier ist ein einfaches Beispiel, wie on verwendet wird, um einen Reducer zu definieren:

typescript

Copy code

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export const initialState = 0;

export const counterReducer = createReducer(
initialState,
on(increment, state => state + 1),
on(decrement, state => state - 1),
on(reset, () => initialState)
);


In diesem Beispiel:

• increment, decrement und reset sind Aktionen, die mit createAction definiert wurden und die jeweils einen Typ haben.
• createReducer erstellt einen Reducer für den Zustand der Zähler-Domäne (counterReducer).
• on(increment, state => state + 1) bedeutet, dass der Reducer auf die increment-Aktion reagiert, indem er den Zustand um 1 erhöht.
• on(decrement, state => state - 1) bedeutet, dass der Reducer auf die decrement-Aktion reagiert, indem er den Zustand um 1 verringert.
• on(reset, () => initialState) bedeutet, dass der Reducer auf die reset-Aktion reagiert, indem er den Zustand auf den initialen Zustand (initialState) zurücksetzt.

Zusammenfassung

Die on-Funktion in NgRx ermöglicht es, Reducer-Fälle zu definieren, die auf bestimmte Aktionen reagieren. Sie ist ein zentrales Konzept im NgRx-Store, um die Zustandsänderungen in der Anwendung zu verwalten und zu steuern. Durch die Verwendung von on können Reducer klar und modular gestaltet werden, was zur Pflege und Skalierbarkeit von Angular-Anwendungen beiträgt, die NgRx verwenden.