William Juan

I am a Frontend Developer working primarily in the web and hybrid mobile spaces. The majority of my work has revolved around the Angular ecosystem, including working with other Angular-related frameworks such as NativeScript and Ionic. My passion lies in converting a design into code and achieving a close to pixel-perfect end-product.

Frontend Developer

See how it's easy to manage your Angular application's state using NGXS and learn how you can use NGXS with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NGXS

**TL;DR:** In the first part of the state management in Angular with NGXS series, we learned about the basics of NGXS, how it works, and how to use it to manage our application's state. In part 2, I will show you how to use Auth0 with NGXS to manage use-related states.

<hr/>

## User State Management

The user store will work similarly to how the menus state management works. I won't detail how each part of the state works and will focus more on the Auth0 and NGXS integration.

The starter app uses the Auth0 SDK directly and manages the roles through the `RolesService`. This tutorial section will walk you through migrating to using Auth0's SDK through NGXS and managing the roles by using the NGXS's `Select` function.

## Create User Model

Let's start with defining the interface for the user state object. Open `user.model.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.model.ts

import { User as Auth0User } from "@auth0/auth0-spa-js";

export interface UserStateModel {
  userDetails: Auth0User | undefined;
}
```

Create a barrel export for the `user` directory with the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.model";
```

To further simplify our imports, add the user folder to the barrel export in the `state` folder and add the following code 👇

```typescript
// src/app/core/state/index.ts

export * from "./menus";

// ✨ New 👇
export * from "./user";
```

## Create User Actions

We have three user-related Actions that we need for our user Store. Login, logout, and user changed Action to keep the user details in our Store in sync with Auth0's SDK.

Since we have several user Actions that will originate from the Navbar component, you can group them under `AllNavbarAction` to ensure you aren't reusing these Actions in a different part of the application (following the Good Action Hygiene pattern).

Because the `UserChangedFromAuth0SDK` Action originates from Auth0's SDK, let's name the source part of the Action type as `Auth0 SDK`.

Open `user.actions.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { User as Auth0User } from "@auth0/auth0-spa-js";

export namespace User {
  export namespace AllNavbarActions {
    export class LoginFlowInitiated {
      static readonly type = "[Navbar] Login Flow Initiated";
    }

    export class LogoutFlowInitiated {
      static readonly type = "[Navbar] Logout Flow Initiated";
    }
  }
  export class UserChangedFromAuth0SDK {
    static readonly type = "[Auth0 SDK] User Changed";
    constructor(public payload: { user: Auth0User | undefined }) {}
  }
}
```

Add `user.actions` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.model";

// ✨ New 👇
export * from "./user.actions";
```

### Update application to use user actions

Like what you did with menus-related functionalities in the first part of the article, let's update the application's user-related functionalities to use NGXS's Actions. You can use Actions by injecting the Store class and calling the `dispatch` function with the Action name you defined in the previous section.

Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { AuthService } from "@auth0/auth0-angular";

// ✨ New 👇
import { Store } from "@ngxs/store";
import { User } from "src/app/core";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;
  isAuthenticated$ = this.authService.isAuthenticated$;
  user$ = this.authService.user$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(
    private authService: AuthService,
    // ✨ New 👇
    private store: Store
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.store.dispatch(new User.AllNavbarActions.LoginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.store.dispatch(new User.AllNavbarActions.LogoutFlowInitiated());
  }
}
```

## Create User State

Before creating individual selectors for slices of the user state, let's start by creating the boilerplate required to use this feature. NGXS uses an `Injectable` class with an additional `State` decorator. Create `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";
import { State } from "@ngxs/store";
import { UserStateModel } from "./user.model";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {}
```

Next, Let's add some utility Selectors for `user`, `isLoggedIn`, `userRoles`, and `isAdmin` to easily let your components access these properties. Open `user.state.ts` and update it with the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";
import { UserStateModel } from "./user.model";

// ✨ New 👇
import { State, Selector } from "@ngxs/store";

// ✨ New 👇
import { environment } from "src/environments/environment";

// ✨ New 👇
import { USER_ROLES } from "../../services";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {
  // ✨ New 👇
  @Selector()
  static user(state: UserStateModel) {
    return state.userDetails;
  }

  // ✨ New 👇
  @Selector()
  static isLoggedIn(state: UserStateModel) {
    return !!state.userDetails;
  }

  // ✨ New 👇
  @Selector()
  static userRoles(state: UserStateModel) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || undefined
    );
  }

  // ✨ New 👇
  @Selector()
  static isAdmin(state: UserStateModel) {
    return state.userDetails?.[`${environment.auth.audience}/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  }
}
```

Add `user.state` to the list of exports in `index.ts` 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.model";
export * from "./user.actions";

// ✨ New 👇
export * from "./user.state";
```

### Update application to use user selectors

The user role route guard previously used the value of the roles from `RolesService`. Since you now have a user roles Selector, you can replace the current implementation with a Selector created in the previous section. Open `user-role.guard.ts` and add the following code👇

```typescript
// src/app/core/guards/user-role.guard.ts

import { Injectable } from "@angular/core";
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from "@angular/router";
import { Observable, of } from "rxjs";
import { catchError, map } from "rxjs/operators";

// ✨ New 👇
import { Store } from "@ngxs/store";
import { UserState } from "..";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    private router: Router,
    // ✨ New 👇
    private store: Store
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ Update this 👇
    return this.store.select(UserState.userRoles).pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        this.router.navigate(["/home"]);
        return of(false);
      })
    );
  }
}
```

Another place we use user-related information is the Navbar. We display user information and conditionally display the login and logout button depending on the user's `isAuthenticated` state. Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { Store } from "@ngxs/store";

// ✨ New 👇
import { User, UserState } from "src/app/core";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;

  // ✨ New 👇
  isAuthenticated$ = this.store.select(UserState.isLoggedIn);

  // ✨ New 👇
  user$ = this.store.select(UserState.user);

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(private store: Store) {}

  loginWithRedirect(): void {
    this.store.dispatch(new User.AllNavbarActions.LoginFlowInitiated());
  }

  logout(): void {
    this.store.dispatch(new User.AllNavbarActions.LogoutFlowInitiated());
  }
}
```

The profile page displays some information about the user, such as name and photo. Since this is stored as part of the user Store, let's also update this to use the user Selector. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { Store } from "@ngxs/store";

// ✨ New 👇
import { UserState } from "src/app/core";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent {
  // ✨ New 👇
  user$ = this.store.select(UserState.user);

  // ✨ New 👇
  constructor(private store: Store) {}
}
```

We display an `Add` button when the logged-in user is an admin user on the Menu Items page. You can read more about setting up admin users on Auth0 in this [blog post](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Store } from "@ngxs/store";

// ✨ New 👇
import { MenusState, UserState } from "src/app/core";

@Component({
  selector: "app-menu-items",
  templateUrl: "./menu-items.component.html",
  styles: [
    `
      :host {
        width: 100%;
        height: 100%;
      }
    `,
  ],
})
export class MenuItemsComponent {
  menuItems$ = this.store.select(MenusState.menuItems);

  // ✨ New 👇
  isAdmin$ = this.store.select(UserState.isAdmin);

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private store: Store
  ) {}

  addMenuItem(): void {
    this.router.navigate(["add"], { relativeTo: this.activatedRoute });
  }
}
```

Lastly, we display the `Edit` and `Delete` buttons when the logged-in user is an admin on the Menu Item page. Open `menu-item.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { Store } from "@ngxs/store";

// ✨ New 👇
import { MenusState, UserState } from "src/app/core";

@Component({
  selector: "app-menu-item",
  templateUrl: "./menu-item.component.html",
  styleUrls: ["./menu-item.component.scss"],
})
export class MenuItemComponent {
  menuItemId$ = this.activatedRoute.params.pipe(map((params) => params.id));

  menuItem$ = this.menuItemId$.pipe(
    switchMap((id) => this.store.select(MenusState.menuItem(id)))
  );

  // ✨ New 👇
  isAdmin$ = this.store.select(UserState.isAdmin);

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    private store: Store
  ) {}

  back(): void {
    this.location.back();
  }

  navigateTo(url: string): void {
    this.router.navigateByUrl(`${this.router.url}/${url}`);
  }
}
```

## Create User Action Handlers

Like the Menus action handlers, the User state will use the `Action` decorator to handle user-related actions. For the User state, the action handlers will be where the app interact with Auth0's SDK - logging in, logging out, and updating the state with Auth0's user object.

Let's start with the login and logout action handlers that trigger their respective flows in Auth0's SDK. Open `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";

// ✨ New 👇
import { State, Action, StateContext, Store, Selector } from "@ngxs/store";
// ✨ New 👇
import { AuthService } from "@auth0/auth0-angular";

import { environment } from "src/environments/environment";
import { UserStateModel } from "./user.model";
import { User } from "./user.actions";
import { USER_ROLES } from "../../services";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {
  constructor(
    private store: Store,
    // ✨ New 👇
    private authService: AuthService
  ) {}

  // ✨ New 👇
  @Action(User.AllNavbarActions.LoginFlowInitiated)
  login() {
    this.authService.loginWithRedirect();
  }

  // ✨ New 👇
  @Action(User.AllNavbarActions.LogoutFlowInitiated)
  logout() {
    this.authService.logout();
  }

  @Selector()
  static user(state: UserStateModel) {
    return state.userDetails;
  }

  @Selector()
  static isLoggedIn(state: UserStateModel) {
    return !!state.userDetails;
  }

  @Selector()
  static userRoles(state: UserStateModel) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || undefined
    );
  }

  @Selector()
  static isAdmin(state: UserStateModel) {
    return state.userDetails?.[`${environment.auth.audience}/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  }
}
```

To keep the user observable from the Auth0's SDK and our User State in sync, create a subscription to listen to `AuthService`'s `user$` property and dispatch the `UserChangedFromAuth0SDK` whenever the observable emits a new value. `UserChangedFromAuth0SDK` will then update the User State with the new user data from Auth0. Open `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { Injectable } from "@angular/core";
import { State, Action, StateContext, Store, Selector } from "@ngxs/store";
import { AuthService } from "@auth0/auth0-angular";
import { environment } from "src/environments/environment";
import { USER_ROLES } from "../../services";
import { UserStateModel } from "./user.model";
import { User } from "./user.actions";

@State<UserStateModel>({
  name: "user",
  defaults: {
    userDetails: undefined,
  },
})
@Injectable()
export class UserState {
  constructor(private store: Store, private authService: AuthService) {
    // ✨ New 👇
    this.listenToUserChange();
  }

  // ✨ New 👇
  @Action(User.UserChangedFromAuth0SDK)
  userChangedFromAuth0SDK(
    ctx: StateContext<UserStateModel>,
    actions: User.UserChangedFromAuth0SDK
  ) {
    const state = ctx.getState();
    ctx.setState({
      ...state,
      userDetails: actions.payload.user,
    });
  }

  @Action(User.AllNavbarActions.LoginFlowInitiated)
  login() {
    this.authService.loginWithRedirect();
  }

  @Action(User.AllNavbarActions.LogoutFlowInitiated)
  logout() {
    this.authService.logout();
  }

  // ✨ New 👇
  private listenToUserChange(): void {
    this.authService.user$.subscribe((user) => {
      this.store.dispatch(
        new User.UserChangedFromAuth0SDK({ user: user || undefined })
      );
    });
  }

  @Selector()
  static user(state: UserStateModel) {
    return state.userDetails;
  }

  @Selector()
  static isLoggedIn(state: UserStateModel) {
    return !!state.userDetails;
  }

  @Selector()
  static userRoles(state: UserStateModel) {
    return (
      state.userDetails?.[`${environment.auth.audience}/roles`] || undefined
    );
  }

  @Selector()
  static isAdmin(state: UserStateModel) {
    return state.userDetails?.[`${environment.auth.audience}/roles`]?.includes(
      USER_ROLES.MENU_ADMIN
    );
  }
}
```

### Update app module

You will then need to add `UserState` to the `NgxsModule` initialization. Open `app.module.ts` and add the following code.

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { NgxsModule } from "@ngxs/store";
import { NgxsReduxDevtoolsPluginModule } from "@ngxs/devtools-plugin";

// ✨ Update this 👇
import { MenusState, UserState } from "./core";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      cacheLocation: "localstorage",
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,
    // ✨ Update this 👇
    NgxsModule.forRoot([MenusState, UserState], { developmentMode: true }),
    NgxsReduxDevtoolsPluginModule.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}
```

> **Checkpoint:** There aren't any visible functional changes added in this section. The difference between the app's current state and the previous checkpoint is its underlying implementation. The app now uses NGXS versus a `BehaviorSubject` to manage user-related states. The app should display the login button with an empty dashboard when the user is not authenticated and display the logout button with the logged-in user's name along with the menu items on the dashboard when a user is authenticated. Clicking on the 'Log in' and 'Log out' buttons should trigger their respective flows using Auth0's SDK and update your application's state. If you open Redux Devtools in your browser, you should see the user state and actions every time you perform any user-related actions.

## Conclusion

State management is a key component when building applications. You added two Stores to our demo application to manage two distinct states - menus and users. This is a relatively small demo application with a few Stores, Actions, and Selectors to show how you can use NGXS to manage your Application's state and use NGXS with Auth0's SDK to handle user-related functionalities.

Add Authentication to Angular With NGXS For State Management

See how it's easy to manage your Angular application's state using Akita and learn how you can use Akita with Auth0's SDK to handle user-related functionalities.

**TL;DR:** In the first part of the state management in Angular with Akita series, we learned about the basics of Akita, how it works, and how to use it to manage our application's state. In part 2, I will show you how to use Auth0 with Akita to manage use-related states.

<hr/>

## User State Management

The user store will work similarly to how the menus state management works. I won't detail how each part of the state works and focus more on the Auth0 and Akita integration.

The starter app is using the Auth0 SDK directly and managing the roles through the `RolesService`, this section of the tutorial will walk you through migrating to using Auth0's SDK through Akita and managing the roles by using Queries.

## Create User Store

Let's start with defining the interface for the user state object and its initial state. Open `user.store.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.store.ts

import { Injectable } from "@angular/core";
import { Store, StoreConfig } from "@datorama/akita";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export interface UserState {
  user: Auth0User | undefined;
}

export function createInitialState(): UserState {
  return {
    user: undefined,
  };
}
@StoreConfig({ name: "user" })
@Injectable({ providedIn: "root" })
export class UserStore extends Store<UserState> {
  constructor() {
    super(createInitialState());
  }
}
```

Create a barrel export for the `user` directory with the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
```

## Create User Actions

We have three user-related Actions that we need for our user Store. Login, logout, and user changed Action to keep the user details in our Store in sync with Auth0's SDK.

Since we have several user Actions that will originate from the Navbar component, you can group them under `allNavbarAction` to ensure you aren't reusing these Actions in a different part of the application (following the Good Action Hygiene pattern).

Because the `userChangedFromAuth0SDK` Action originates from Auth0's SDK, let's name the source part of the Action type as `Auth0 SDK`.

Open `user.actions.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { createAction, props } from "@datorama/akita-ng-effects";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export const allNavbarActions = {
  loginFlowInitiated: createAction("[Navbar] Login Flow Initiated"),
  logoutFlowInitiated: createAction("[Navbar] Logout Flow Initiated"),
};

export const userChangedFromAuth0SDK = createAction(
  "[Auth0 SDK] User Changed",
  props<{ user: Auth0User | undefined }>()
);
```

Add `user.actions` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";

// ✨ New 👇
export * from "./user.actions";
```

### Update application to use user actions

Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { AuthService } from "@auth0/auth0-angular";

// ✨ New 👇
import { Actions } from "@datorama/akita-ng-effects";

// ✨ New 👇
import { allNavbarActions } from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;
  isAuthenticated$ = this.authService.isAuthenticated$;
  user$ = this.authService.user$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(
    private authService: AuthService,
    // ✨ New 👇
    private actions: Actions
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.actions.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.actions.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

## Create User Query

Before creating individual queries for slices of the user state, let's start by creating the boilerplate required to use this feature. Akita uses an `Injectable` class that extends Akita's `Query` class. Create `user.query.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.query.ts

import { Injectable } from "@angular/core";
import { Query } from "@datorama/akita";
import { UserState } from "./user.store";

@Injectable({ providedIn: "root" })
export class UserQuery extends Query<UserState> {
  selectUser$ = this.select("user");
}
```

Next, Let's add some utility Queries for `isLoggedIn`, `userRoles`, and `isAdmin` to let your components access these properties easily. Open `user.query.ts` and update it with the following code 👇

```typescript
// src/app/core/state/user/user.query.ts

import { Injectable } from "@angular/core";
import { Query } from "@datorama/akita";

// ✨ New 👇
import { map } from "rxjs/operators";

// ✨ New 👇
import { environment } from "src/environments/environment";

// ✨ New 👇
import { UserStore, UserState } from "./user.store";

// ✨ New 👇
export const USER_ROLES = {
  MENU_ADMIN: "menu-admin",
};
@Injectable({ providedIn: "root" })
export class UserQuery extends Query<UserState> {
  selectUser$ = this.select("user");

  // ✨ New 👇
  selectIsLoggedIn$ = this.selectUser$.pipe(map((user) => !!user));

  // ✨ New 👇
  selectUserRoles$ = this.selectUser$.pipe(
    map((user) => user?.[`${environment.auth.audience}/roles`] || undefined)
  );

  // ✨ New 👇
  selectIsAdmin$ = this.selectUserRoles$.pipe(
    map((userRoles) => userRoles?.includes(USER_ROLES.MENU_ADMIN))
  );

  constructor(protected store: UserStore) {
    super(store);
  }
}
```

Add `user.query` to the list of exports in `index.ts` 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
export * from "./user.actions";

// ✨ New 👇
export * from "./user.query";
```

### Update application to use user queries

The user role route guard was previously using the value of the roles from `RolesService`. Since you now have a user roles Query, you can replace the current implementation with a query created in the previous section. Open `user-role.guard.ts` and add the following code 👇

```typescript
// src/app/core/guards/user-role.guard.ts

import { Injectable } from "@angular/core";
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from "@angular/router";
import { Observable, of } from "rxjs";
import { catchError, map } from "rxjs/operators";

// ✨ New 👇
import { UserQuery } from "../state/user";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    private router: Router,
    // ✨ New 👇
    private userQuery: UserQuery
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ Update this 👇
    return this.userQuery.selectUserRoles$.pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        this.router.navigate(["/home"]);
        return of(false);
      })
    );
  }
}
```

Another place we use user-related information is the Navbar. We display user information and conditionally display the login and logout button depending on the user's `isAuthenticated` state. Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { Actions } from "@datorama/akita-ng-effects";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";

// ✨ New 👇
import { allNavbarActions, UserQuery } from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;

  // ✨ New 👇
  isAuthenticated$ = this.userQuery.selectIsLoggedIn$;

  // ✨ New 👇
  user$ = this.userQuery.selectUser$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  // ✨ New 👇
  constructor(private userQuery: UserQuery, private actions: Actions) {}

  loginWithRedirect(): void {
    this.actions.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    this.actions.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

The profile page displays some information about the user, such as name and photo. Since this is stored as part of the user Store, let's also update this to use the `selectUser$` Query. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent {
  // ✨ New 👇
  user$ = this.userQuery.selectUser$;

  // ✨ New 👇
  constructor(private userQuery: UserQuery) {}
}
```

We display an `Add` button when the logged-in user is an admin user on the Menu Items page. You can read more about setting up admin users on Auth0 in this [blog post](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { MenusQuery } from "src/app/core/state/menus";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@Component({
  selector: "app-menu-items",
  templateUrl: "./menu-items.component.html",
  styles: [
    `
      :host {
        width: 100%;
        height: 100%;
      }
    `,
  ],
})
export class MenuItemsComponent {
  menuItems$ = this.menuQuery.selectMenuItems$;

  // ✨ New 👇
  isAdmin$ = this.userQuery.selectIsAdmin$;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    // ✨ New 👇
    private userQuery: UserQuery,
    private menuQuery: MenusQuery
  ) {}

  addMenuItem(): void {
    this.router.navigate(["add"], { relativeTo: this.activatedRoute });
  }
}
```

Lastly, we display a `Edit` and `Delete` buttons when the logged-in user is an admin user on the Menu Item page. Open `menu-item.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { MenusQuery } from "src/app/core/state/menus";

// ✨ New 👇
import { UserQuery } from "src/app/core/state/user";

@Component({
  selector: "app-menu-item",
  templateUrl: "./menu-item.component.html",
  styleUrls: ["./menu-item.component.scss"],
})
export class MenuItemComponent {
  menuItemId$ = this.activatedRoute.params.pipe(map((params) => params.id));

  menuItem$ = this.menuItemId$.pipe(
    switchMap((id) => this.menusQuery.selectMenuItem(id))
  );

  // ✨ New 👇
  isAdmin$ = this.userQuery.selectIsAdmin$;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    // ✨ New 👇
    private userQuery: UserQuery,
    private menusQuery: MenusQuery
  ) {}

  back(): void {
    this.location.back();
  }

  navigateTo(url: string): void {
    this.router.navigateByUrl(`${this.router.url}/${url}`);
  }
}
```

## Create User Effects

As explained at the beginning of part 1 of the "State Management with Akita" series, Effects are where side effects of the Action are handled. For the user store, this will be where the app will interact with Auth0's SDK, updating the store when the user object changes and logging in and logging out the user. Let's start with creating an empty class with the `Injectable` decorator. Create `user.effects.ts` in the `core/state/user/` directory and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";

@Injectable()
export class UserEffects {}
```

Next, let's add login and logout action handlers that trigger their respective flows in Auth0's SDK. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";

// ✨ New 👇
import { map, tap } from "rxjs/operators";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@datorama/akita-ng-effects";
import * as UserActions from "./user.actions";
import { UserStore } from "./user.store";

@Injectable()
export class UserEffects {
  // ✨ New 👇
  constructor(
    private actions$: Actions,
    private userStore: UserStore,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  // ✨ New 👇
  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

To keep the user observable from the Auth0's SDK and our user Store in sync, you can use an actionless effect that listens to an external observable (in our case `authService.user$`) and dispatches another action (`UserActions.userChangedFromAuth0SDK`) whenever that observable emits a new value. `UserActions.userChangedFromAuth0SDK` will then update the user store with new user data from Auth0. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { map, tap } from "rxjs/operators";
import { Actions, createEffect, ofType } from "@datorama/akita-ng-effects";
import * as UserActions from "./user.actions";
import { UserStore } from "./user.store";
import { AuthService } from "@auth0/auth0-angular";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions,
    private userStore: UserStore,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  userChanged$ = createEffect(
    () =>
      this.authService.user$.pipe(
        map((user) =>
          UserActions.userChangedFromAuth0SDK({ user: user || undefined })
        )
      ),
    { dispatch: true }
  );

  // ✨ New 👇
  userChangedFromAuth0SDK$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.userChangedFromAuth0SDK),
        tap((action) => {
          this.userStore.update((state) => ({
            ...state,
            user: action.user,
          }));
        })
      ),
    { dispatch: false }
  );

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

Add `user.effects` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.store";
export * from "./user.actions";
export * from "./user.query";

// ✨ New 👇
export * from "./user.effects";
```

### Update Effects Module

You will then need to add `UserEffects` to the `EffectsModule` initialization. Open `app.module.ts` and add the following code

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AkitaNgEffectsModule } from "@datorama/akita-ng-effects";
import { AkitaNgDevtools } from "@datorama/akita-ngdevtools";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { MenusEffects } from "./core/state/menus";

// ✨ New 👇
import { UserEffects } from "./core/state/user";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // ✨ Update this 👇
    AkitaNgEffectsModule.forRoot([MenusEffects, UserEffects]),
    environment.production
      ? []
      : AkitaNgDevtools.forRoot({
          maxAge: 25,
        }),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}
```

> **Checkpoint:** There aren't any visible functional changes added in this section. The difference between the app's current state and the previous checkpoint is its underlying implementation. The app now uses Akita versus a `BehaviorSubject` to manage user-related states. The app should display the login button with an empty dashboard when the user is not authenticated, and display the logout button with the logged-in user's name along with the menu items on the dashboard when a user is authenticated. Clicking on the "Log in" and "Log out" buttons should trigger their respective flows using Auth0's SDK and update your application's state. If you open Redux Devtools in your browser, you should see the user state and actions every time you perform any user-related actions.

## Conclusion

State management is a key component when building applications. You added two Stores to our demo application to manage two distinct states - menus and user. This is a relatively small demo application with a few Stores, Actions, Queries, and Effects to show how you can use Akita to manage your Application's state, and use Akita with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using Akita - Pt. 2

State Management in Angular Using Akita - Pt. 1

See how it's easy to manage your Angular application's state using NgRx and learn how you can use NgRx with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NgRx: Pt. 1

## User State Management

The user store will work similarly to how the menus state management works. I won't detail how each part of the state works and focus more on the Auth0 and NgRx integration.

The starter app is using the Auth0 SDK directly and managing the roles through the `RolesService`, this section of the tutorial will walk you through migrating to using Auth0's SDK through NgRx and managing the roles by using selectors.

### Create User State

Let's start with defining the interface for the user state object and its initial state. Open `user.state.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.state.ts

import { User as Auth0User } from "@auth0/auth0-spa-js";

export interface UserState {
  userDetails: Auth0User;
}

export const initialState: UserState = {
  userDetails: undefined,
};
```

Create a barrel export for the `user` directory with the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
```

#### Update Core State

To access `UserState` from your Store, you will need to add it to your `CoreState`'s state object. Open `core.state.ts` and add the following code 👇

```typescript
// src/app/core/state/core.state.ts

import { MenusState } from "./menus";
// ✨ New 👇
import { UserState } from "./user";

export interface State {
  menus: MenusState;
  // ✨ New 👇
  user: UserState;
}
```

### Create User Actions

We have three user-related Actions that we need for our user Store. Login, logout, and user changed Action to keep the user details in our Store in sync with Auth0's SDK.

Since we have several user Actions that will originate from the Navbar component, you can group them under `allNavbarAction` to ensure you aren't reusing these Actions in a different part of the application (following the Good Action Hygiene pattern).

Because the `userChangedFromAuth0SDK` Action originates from Auth0's SDK, let's name the source part of the Action type as `Auth0 SDK`.

Open `user.actions.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.actions.ts

import { createAction, props } from "@ngrx/store";
import { User as Auth0User } from "@auth0/auth0-spa-js";

export const allNavbarActions = {
  loginFlowInitiated: createAction("[Navbar] Login Flow Initiated"),
  logoutFlowInitiated: createAction("[Navbar] Logout Flow Initiated"),
};

export const userChangedFromAuth0SDK = createAction(
  "[Auth0 SDK] User Changed",
  props<{ userDetails: Auth0User }>()
);
```

Add `user.actions` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";

// ✨ New 👇
export * from "./user.actions";
```

#### Update Application to Use User Actions

Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { AuthService } from "@auth0/auth0-angular";

// ✨ New 👇
import { Store } from "@ngrx/store";
import { allNavbarActions } from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;
  isAuthenticated$ = this.authService.isAuthenticated$;
  user$ = this.authService.user$;

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(
    private authService: AuthService,
    // ✨ New 👇
    private store: Store
  ) {}

  loginWithRedirect(): void {
    // ✨ New 👇
    this.store.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    // ✨ New 👇
    this.store.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

### Create User Selectors

Create two selectors, a feature selector and a selector that returns the `userDetails`. Open `user.selector.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.selector.ts

import { createFeatureSelector, createSelector } from "@ngrx/store";
import { UserState } from "./user.state";

export const selectUser = createFeatureSelector<UserState>("user");

export const selectUserDetails = createSelector(
  selectUser,
  (state: UserState) => state.userDetails
);
```

Let's also add some utility Selectors for `isLoggedIn`, `userRoles`, and `isAdmin` to easily let your components access these properties. Open `user.selector.ts` and update it with the following code 👇

```typescript
// src/app/core/state/user/user.selector.ts

import { createFeatureSelector, createSelector } from "@ngrx/store";

// ✨ New 👇
import { environment } from "src/environments/environment";
import { UserState } from "./user.state";

// ✨ New 👇
export const USER_ROLES = {
  MENU_ADMIN: "menu-admin",
};

export const selectUser = createFeatureSelector<UserState>("user");

export const selectUserDetails = createSelector(
  selectUser,
  (state: UserState) => state.userDetails
);

// ✨ New 👇
export const selectIsLoggedIn = createSelector(
  selectUserDetails,
  (userDetails) => !!userDetails
);

// ✨ New 👇
export const selectUserRoles = createSelector(
  selectUserDetails,
  (userDetails) => userDetails[`${environment.auth.audience}/roles`]
);

// ✨ New 👇
export const selectIsAdmin = createSelector(selectUserRoles, (userRoles) =>
  userRoles?.includes(USER_ROLES.MENU_ADMIN)
);
```

Add `user.selector` to the list of exports in `index.ts` 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
export * from "./user.actions";

// ✨ New 👇
export * from "./user.selector";
```

#### Update Application to Use User Selectors

The user role route guard was previously using the value of the roles from `RolesService`. Since you now have a user roles Selector, you can replace the current implementation with an NgRx Selector. Open `user-role.guard.ts` and add the following code 👇

```typescript
// src/app/core/guards/user-role.guard.ts

import { Injectable } from "@angular/core";
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from "@angular/router";

// ✨ New 👇
import { Store } from "@ngrx/store";

import { Observable, of } from "rxjs";
import { catchError, map } from "rxjs/operators";
import { selectUserRoles } from "../state/user";

@Injectable({ providedIn: "root" })
export class UserRoleGuard implements CanActivate {
  constructor(
    // ✨ New 👇
    private store: Store,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // ✨ New 👇
    return this.store.select(selectUserRoles).pipe(
      map((roles) => {
        if (roles && roles.includes(route?.data?.role)) {
          return true;
        }

        // redirect the user to home
        this.router.navigate(["/home"]);
        return false;
      }),
      catchError((err) => {
        // redirect the user to home
        this.router.navigate(["/home"]);
        return of(false);
      })
    );
  }
}
```

Another place we use user-related information is the Navbar. We display user information and conditionally display the login and logout button depending on the user's `isAuthenticated` state. Open `nav-bar.component.ts` and add the following code 👇

```typescript
// src/app/shared/components/nav-bar/nav-bar.component.ts

import { Component } from "@angular/core";
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faHome, faUser, faUtensils } from "@fortawesome/free-solid-svg-icons";
import { Store } from "@ngrx/store";

// ✨ New 👇
import {
  allNavbarActions,
  selectIsLoggedIn,
  selectUserDetails,
} from "src/app/core/state/user";

export interface INavBarMenuLinkProps {
  to: string;
  icon: IconDefinition;
  label: string;
}

@Component({
  selector: "app-nav-bar",
  templateUrl: "./nav-bar.component.html",
  styleUrls: ["./nav-bar.component.scss"],
})
export class NavBarComponent {
  faUser = faUser;

  // ✨ New 👇
  isAuthenticated$ = this.store.select(selectIsLoggedIn);
  user$ = this.store.select(selectUserDetails);

  navOptions: INavBarMenuLinkProps[] = [
    { to: "/home", label: "Home", icon: faHome },
    { to: "/menu", label: "Menu", icon: faUtensils },
  ];

  constructor(private store: Store) {}

  loginWithRedirect(): void {
    this.store.dispatch(allNavbarActions.loginFlowInitiated());
  }

  logout(): void {
    this.store.dispatch(allNavbarActions.logoutFlowInitiated());
  }
}
```

The profile page displays some information about the user, such as name and photo. Since this is stored as part of the user Store, let's also update this to use the `selectUserDetails` Selector. Open `profile.component.ts` and add the following code 👇

```typescript
// src/app/features/profile/profile.component.ts

import { Component } from "@angular/core";

// ✨ New 👇
import { Store } from "@ngrx/store";
import { selectUserDetails } from "src/app/core/state/user";

@Component({
  selector: "app-profile",
  templateUrl: "./profile.component.html",
  styleUrls: ["./profile.component.scss"],
})
export class ProfileComponent {
  // ✨ New 👇
  user$ = this.store.select(selectUserDetails);

  // ✨ New 👇
  constructor(private store: Store) {}
}
```

We display an `Add` button when the logged-in user is an admin user on the Menu Items page. You can read more about setting up admin users on Auth0 in this [blog post](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-role-based-access-control/#Get-User-Roles). Open `menu-items.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-items/menu-items.component.ts

import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Store } from "@ngrx/store";
import { selectMenuItems } from "src/app/core/state/menus";
// ✨ New 👇
import { selectIsAdmin } from "src/app/core/state/user";

@Component({
  selector: "app-menu-items",
  templateUrl: "./menu-items.component.html",
  styles: [
    `
      :host {
        width: 100%;
        height: 100%;
      }
    `,
  ],
})
export class MenuItemsComponent {
  menuItems$ = this.store.select(selectMenuItems);
  // ✨ New 👇
  isAdmin$ = this.store.select(selectIsAdmin);

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private store: Store
  ) {}

  addMenuItem(): void {
    this.router.navigate(["add"], { relativeTo: this.activatedRoute });
  }
}
```

Lastly, we display a `Edit` and `Delete` buttons when the logged-in user is an admin user on the Menu Item page. Open `menu-item.component.ts` and add the following code 👇

```typescript
// src/app/features/menu/menu-item/menu-item.component.ts

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute, Router } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { Store } from "@ngrx/store";
import { selectMenuItem } from "src/app/core/state/menus";

// ✨ New 👇
import { selectIsAdmin } from "src/app/core/state/user";

@Component({
  selector: "app-menu-item",
  templateUrl: "./menu-item.component.html",
  styleUrls: ["./menu-item.component.scss"],
})
export class MenuItemComponent {
  menuItemId$ = this.activatedRoute.params.pipe(map((params) => params.id));
  menuItem$ = this.menuItemId$.pipe(
    switchMap((id) => this.store.select(selectMenuItem({ id: id })))
  );

  // ✨ New 👇
  isAdmin$ = this.store.select(selectIsAdmin);

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private location: Location,
    private store: Store
  ) {}

  back(): void {
    this.location.back();
  }

  navigateTo(url: string): void {
    this.router.navigateByUrl(`${this.router.url}/${url}`);
  }
}
```

### Create User Reducer

The `userDetails` in the user Store will only be modified based on the `userChanged` event from Auth0's SDK to always keep them in sync. Open `user.reducer.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.reducer.ts

import { Action, createReducer, on } from "@ngrx/store";
import * as UserActions from "./user.actions";
import { initialState, UserState } from "./user.state";

const userReducer = createReducer(
  initialState,
  on(UserActions.userChangedFromAuth0SDK, (state, { userDetails }) => ({
    ...state,
    userDetails: userDetails,
  }))
);

export function reducer(state: UserState | undefined, action: Action) {
  return userReducer(state, action);
}
```

#### Update Core Reducer

Similar to what you did for the menus Reducer, you will need to add the reducer to the `ActionReducerMap` to use the user reducer. Open `core.reducer.ts` and add the following code 👇

```typescript
// src/app/core/state/core.reducers.ts

import { ActionReducerMap, MetaReducer } from "@ngrx/store";
import { State } from "./core.state";
import * as MenusReducer from "./menus/menus.reducer";
// ✨ New 👇
import * as UserReducer from "./user/user.reducer";

export const reducers: ActionReducerMap<State> = {
  menus: MenusReducer.reducer,
  // ✨ New 👇
  user: UserReducer.reducer,
};

export const metaReducers: MetaReducer<State>[] = [];
```

### Create User Effects

You will be interacting with Auth0's SDK through the user Effects, to log in and log out the user and listen to changes in the user's state. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { tap, map } from "rxjs/operators";
import * as UserActions from "./user.actions";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions<any>,
    private authService: AuthService
  ) {}

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated.type),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated.type),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

To keep the user observable from the Auth0's SDK and our user Store in sync, you can use an actionless effect that listens to an external observable (in our case `authService.user$`) and dispatches another action whenever that observable emits a new value. Open `user.effects.ts` and add the following code 👇

```typescript
// src/app/core/state/user/user.effects.ts

import { Injectable } from "@angular/core";
import { AuthService } from "@auth0/auth0-angular";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import { tap, map } from "rxjs/operators";
import * as UserActions from "./user.actions";

@Injectable()
export class UserEffects {
  constructor(
    private actions$: Actions<any>,
    private authService: AuthService
  ) {}

  // ✨ New 👇
  userChanged$ = createEffect(() =>
    this.authService.user$.pipe(
      map((userDetails) =>
        UserActions.userChangedFromAuth0SDK({ userDetails: userDetails })
      )
    )
  );

  login$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.loginFlowInitiated.type),
        tap(() => this.authService.loginWithRedirect())
      ),
    { dispatch: false }
  );

  logout$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(UserActions.allNavbarActions.logoutFlowInitiated.type),
        tap(() => this.authService.logout())
      ),
    { dispatch: false }
  );
}
```

Add `user.effects` to the barrel export. Open `index.ts` and add the following code 👇

```typescript
// src/app/core/state/user/index.ts

export * from "./user.state";
export * from "./user.actions";
export * from "./user.selector";

// ✨ New 👇
export * from "./user.effects";
```

#### Update Effects Module

You will then need to add `UserEffects` to the `EffectsModule` initialization. Open `app.module.ts` and add the following code

```typescript
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { StoreModule } from "@ngrx/store";
import { EffectsModule } from "@ngrx/effects";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { reducers, metaReducers } from "./core/state";
import { MenusEffects } from "./core/state/menus";

// ✨ New 👇
import { UserEffects } from "./core/state/user";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // NgRx
    StoreModule.forRoot(reducers, {
      metaReducers,
    }),

    // ✨ New 👇
    EffectsModule.forRoot([MenusEffects, UserEffects]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}
```

> **Checkpoint:** There aren't any visible functional changes added in this section. The difference between the current state of the app compared to the previous checkpoint is its underlying implementation. The app now uses NgRx versus a `BehaviorSubject` to manage user-related states. The app should display the login button with an empty dashboard when the user is not authenticated, and display the logout button with the logged-in user's name along with the menu items on the dashboard when a user is authenticated. Clicking on the "Log in" and "Log out" buttons should trigger their respective flows using Auth0's SDK and update your application's state. If you open Redux Devtools in your browser, you should see the user state and actions every time you perform any user-related actions.

## Conclusion

State management is a key component when building applications. You added two Stores to our demo application to manage two distinct states - menus and user. This is a relatively small demo application with a few Stores, Actions, and Reducers to show how you can use NgRx to manage your Application's state, and use NgRx with Auth0's SDK to handle user-related functionalities.

State Management in Angular Using NgRx: Pt. 2

fikayo-adepoju

Fikayo Adepoju is a Full-stack developer, technical writer and tech content creator proficient in Web and Mobile technologies and DevOps with over 10 years experience developing scalable distributed applications. With over 40 articles written for CircleCI, Twilio, Auth0 and The New Stack blogs and also on his personal Medium page, he loves to share his knowledge to as many developers as would benefit from it. You can also check out his video courses on <a href="https://www.udemy.com/user/fikayo-adepoju/">Udemy</a>.

Full-Stack Developer

Fikayo Adepoju

A tutorial on how to use the Svelte state management store to manage state in Svelte applications.

**TL;DR:** As a Front-end developer, one of the most crucial skills to possess is how to manage state in your applications. The ability to synchronize application state with data changes and manage shared state amongst different components is a strong requirement in building modern frontend applications. Several state management libraries have been developed with certain frameworks having a de-facto state management library that they naturally work well with (e.g., [Redux](https://redux.js.org/) for [Reactjs](https://reactjs.org/)).

In this tutorial, you will learn how to perform state management in [Svelte](https://svelte.dev/) applications using Svelte's built-in state management [Stores](https://svelte.dev/tutorial/writable-stores).

## What We'll Build

In this tutorial, you will be implementing state management in a shopping cart built with Svelte. You will begin with a pre-built e-commerce application that sells different types of wares. However, this application is not yet complete, as its shopping features for adding products to the cart and managing cart items have not been implemented. Using the Svelte store, you will be adding the following features to the application:

- Load the products from a central state store
- Add items to the shopping cart
- Display items added to the shopping cart
- Calculate the total price of items in the cart
- Increase and decrease the quantity of the items in the cart
- Remove items from the cart

## Prerequisites

There are a few requirements to follow along with this exercise:

- [Node.js](https://nodejs.org) installed on your system. You can visit the website and install a suitable version for your operating system [here](https://nodejs.org/).
- Basic knowledge of [Svelte](https://svelte.dev) and using [Svelte components](https://svelte.dev/tutorial/nested-components).

With all these in place, you can proceed with the exercise.

## Cloning the Demo E-commerce Project

To begin, you will clone the starting point for the project and run it. Run the following command to clone a copy of the e-commerce project unto your machine:

```bash
git clone --single-branch --branch base-project https://github.com/coderonfleek/svelte-store
```

Once you have the project on your system, go into the root of the project and install the dependencies with the following commands:

```bash
cd svelte-store
npm install
```

With all dependencies installed, you can then run the project using the following command:

```bash
npm run dev
```

This command will boot up a local development server at [`http://localhost:5000`](http://localhost:5000). Navigate to this address on your browser, and you will see the page displayed below:

!["Homepage - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/nwLSAkqqjS7tFnYJhSUB5/eb8586b16288ada93d2c56fbf3fb00a2/svelte_01.jpg)

At the moment, when you click `Add to Cart` on any of the products, the button does nothing. The source code for the homepage is located in the file `src/views/Home.svelte`. The products are currently loaded from a `products` array on the page using a `Product` component to display the products:

```html
<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-9 pt-5">
        <div
          class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-3"
        >
          {#each products as product}
          <Product {product} />
          {/each}
        </div>
      </div>
      <div class="col-md-3 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>
```

On the right column, a `Cart` component is used to display items that have been added to the cart and their respective quantities, which is also hard-coded into the component at the moment. The `Cart` component also consists of a `Checkout` button which will navigate to the full shopping cart details page shown below when clicked:

!["Cart details page - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/5sW3mmLvYraDwX9d71RZQY/0582cbbb68c9e9c1c697473e8779237e/svelte_02.jpg)

The cart details page source code can be found in `src/views/ShoppingCart.svelte`. It uses a `CartItem` component to display any item added to the cart with buttons to increase or decrease the quantity of the item in the cart or remove it completely. The `Cart` component is also displayed on the right column, just as it was on the homepage. At the moment, these buttons do nothing when clicked.

```html
<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-8 pt-5">
        {#each cart as product}
        <CartItem {product} />
        {/each}
      </div>
      <div class="col-md-4 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>
```

The cart items displayed on this page are loaded from a `cart` array and are currently hard-coded on the page. What's more, clicking any of the buttons does nothing at the moment. All components used in the application are contained in the `src/components` folder.

## Creating the State Management Store

To begin implementing the features listed in the above section, you will need to set up a central state management store in the application. Create a `store.js` file inside the `src` folder, then add the following code:

```js
import { writable, derived } from "svelte/store";

export const products = writable([
  {
    id: 1,
    name: "Chelsea Shoes",
    price: 200,
    shortdesc: "Best Drip in the Market",
    url: "images/chelsea-shoes.png"
  },
  {
    id: 2,
    name: "Kimono",
    price: 50,
    shortdesc: "Classy, Stylish, Dope",
    url: "images/kimono.png"
  },
  {
    id: 3,
    name: "Watch",
    price: 2500,
    shortdesc: "Elegance built in",
    url: "images/rolex.png"
  },
  {
    id: 4,
    name: "Wallet",
    price: 80,
    shortdesc: "Sleek, Trendy, Clean",
    url: "images/wallet.png"
  },
  {
    id: 5,
    name: "Lady Handbags",
    price: 230,
    shortdesc: "Fabulous, Exotic, Classy",
    url: "images/handbag.png"
  },
  {
    id: 6,
    name: "Casual Shirts",
    price: 30,
    shortdesc: "Neat, Sleek, Smart",
    url: "images/shirt.png"
  }
]);

export const cart = writable([]);
```

The store above contains two writable properties:

- The `products` property holds all products contained in the e-commerce application. In a production scenario, you would want to load products from a remote API.
- The `cart` property is an array that holds the items a user adds to their cart. This is empty by default.

These properties are all that is needed to implement the features listed above.

## Loading Products to the Home Page from the Store

The first task is to ensure that the products are loaded from the store instead of being hard-coded on the `Home.svelte` homepage. Locate `src/views/Home.svelte` and replace its content with the following code:

```js
<script>
  import Product from "../components/Product.svelte";
  import Cart from "../components/Cart.svelte";
  import { products } from "../store";
</script>

<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-9 pt-5">
        <div
          class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 row-cols-xl-3"
        >
          {#each $products as product}
            <Product {product} />
          {/each}
        </div>
      </div>
      <div class="col-md-3 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>
```

In the update above, the `products` variable has now been replaced with store property `products` that references the store to load the products. Now refresh your homepage, and you will not see any change, but you know that your products are now being loaded from the store.

## Adding Items to the Shopping Cart

The next task is to implement the functionality that allows users to click `Add to Cart` on a product on the homepage and see it added to the cart widget on the right column. As mentioned earlier, products displayed on the page are managed using a `Product` component. Locate this component at `src/components/Product.svelte` and replace its content with the following code:

```js
<script>
  import { cart } from "../store";
  export let product;

  let inCart = false;

  $: {
    $cart.forEach((item) => {
      if (item.id == product.id) {
        inCart = true;
      }
    });
  }

  function addToCart() {
    if (!inCart) {
      let updatedCart = [...$cart, { ...product, quantity: 1 }];

      cart.set(updatedCart);
    } else {
      alert("Item already added to Cart");
    }
  }
</script>

<main>
  <div class="col mb-4">
    <div class="card">
      <img src={product.url} class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">{product.name}</h5>
        <p class="card-text">
          ${product.price}
          <br />
          <small>
            {product.shortdesc}
          </small>
        </p>
        <button
          on:click={() => addToCart()}
          class="btn btn-primary"
          disabled={inCart}>{inCart ? "Added" : "Add to Cart"}</button
        >
      </div>
    </div>
  </div>
</main>
```

The updates to this file add two properties to the component:

- A reference to the `cart` property in the store
- The `inCart` checks if the product using this component has been added to the store or not

The `addToCart` function adds an item to the cart when the `Add to Cart` button is clicked by updating the `cart` property in the store with the new item. This function first checks if the product is already in the cart. If so, an alert is displayed indicating that the product has already been added. If not, the product is added to the cart.

The `inCart` property is also used in the template to disable the `Add to Cart` button if the product has already been added.

Next, the `Cart` component needs to display the products that have been added to the cart and also the total price. Locate the `src/components/Cart.svelte` file and replace its content with the following code:

```js
<script>
  import { link } from "svelte-spa-router";
  import { cart } from "../store";

  $: totalPrice = $cart.reduce((total, next) => {
    console.log($cart);
    return total + next.quantity * next.price;
  }, 0);
</script>

<main>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Your Cart</h5>
      {#if $cart.length == 0}
        <p>Your Cart is Empty</p>
      {/if}
    </div>
    <ul class="list-group list-group-flush">
      {#each $cart as item}
        <li
          class="list-group-item d-flex justify-content-between align-items-center"
        >
          {item.name}
          <span class="badge badge-primary badge-pill">{item.quantity}</span>
        </li>
      {/each}
      <li
        class="list-group-item d-flex justify-content-between align-items-center"
      >
        Price <b>${totalPrice}</b>
      </li>
    </ul>

    <div class="card-body">
      <a use:link href="/shop" class="btn btn-primary btn-block">Checkout</a>
    </div>
  </div>
</main>

```

The update to this file first replaces the hard-coded cart items with reference to that `cart` state in the store. A `totalPrice` property is also used to evaluate the total cost of all items currently added to the shopping cart. In the template, the length of `cart` is used to display a message to the user to add items to the shopping cart when the cart is empty.

Return to the browser and reload the homepage if it hasn't been reloaded. You will see the view below. Notice the new look of the cart widget on the right column:

!["Updated Cart - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/3OzDAoyWDYhkPpma41kAlK/34958e5b49a984b65df3857f763f9cc3/svelte_03.jpg)

Now click on `Add to Cart` to add at least 2 items to the cart and observe the cart widget update based on your selections like below:

!["Items selection - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/UyhS5wLpRtIr7zRjiOXsT/cacc42d088fe9417a084e78e76a8f3e7/svelte_04.jpg)

## Changing Items Quantity and Removing Items from the Cart

Notice how the default quantity of each product added to the cart is set to one (1)? This is because every count has to start from 1. In a proper shopping cart application, users should be allowed to increase the quantity of each selected item.

The next task is to add features for increasing and decreasing the number of cart items. You will also add the ability to completely remove an item from the cart.

From the shopping cart details page shown earlier, each cart item displayed with buttons to manage its quantity uses the `CartItem` component. Locate this component at `src/components/CartItem.svelte` and replace the code in it with the following:

```js
<script>
  import Product from "../components/Product.svelte";
  import { cart } from "../store";

  export let product;

  let itemQuantity = 0;

  $: {
    let get_product = $cart.filter((item) => item.id == product.id);

    itemQuantity = get_product[0].quantity;
  }

  function changeQuantity(action = "add") {
    if (action == "add") {
      product.quantity = product.quantity + 1;

      updateCart(product);
    } else {
      if (product.quantity > 1) {
        product.quantity = product.quantity - 1;
        updateCart(product);
      } else {
        //Remove the item

        removeItem(product);
      }
    }
  }

  function removeItem(product) {
    let removedItemCart = $cart.filter((cartItem) => {
      return cartItem.id != product.id;
    });

    cart.set(removedItemCart);
  }

  function updateCart(product) {

    let updatedCart = $cart.map((cartItem) => {
      if (cartItem.id == product.id) {
        return product;
      }

      return cartItem;
    });

    cart.set(updatedCart);
  }
</script>

<main>
  <div class="row cart-item-row">
    <div class="col-md-6">
      <Product {product} />
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-5">
          <button
            on:click={() => changeQuantity()}
            class="btn btn-primary btn-block">+</button
          >
        </div>
        <div class="col-md-2 text-center">{product.quantity}</div>
        <div class="col-md-5">
          <button
            on:click={() => changeQuantity("remove")}
            class="btn btn-warning btn-block">-</button
          >
        </div>
      </div>
      <div class="row cart-remove-button">
        <div class="col-md-12">
          <button on:click={() => removeItem()} class="btn btn-danger btn-block"
            >Remove Item</button
          >
        </div>
      </div>
    </div>
  </div>
</main>

<style scoped>
  .cart-item-row {
    border-bottom: 1px solid #ccc;
    margin-top: 20px;
  }
  .cart-remove-button {
    margin-top: 10px;
  }
</style>
```

This update adds two computed properties, `cart`, which is a reference to the `cart` state property in the store, and `itemQuantity`, which gets the current quantity of the item in the shopping cart.

Three methods are also added which do the following:

- `changeQuantity`: takes in an `action` argument that is either set to `add` or `decrease` to determine whether to increase or decrease the item quantity by 1. If the current quantity is 1 and the function is asked to decrease the item, the item would be removed completely.
- `removeItem`: completely removes an item from the shopping cart.
- `updateCart`: A utility function for reusing the update logic for `cart` in the store

Next, locate the shopping cart details page at `src/views/ShoppingCart.svelte` and replace its content with the following code:

```js
<script>
  import Cart from "../components/Cart.svelte";
  import CartItem from "../components/CartItem.svelte";

  import { cart } from "../store";
</script>

<main>
  <div class="home container">
    <div class="row">
      <div class="col-md-8 pt-5">
        {#each $cart as product}
          <CartItem {product} />
        {/each}
      </div>
      <div class="col-md-4 pt-5">
        <Cart />
      </div>
    </div>
  </div>
</main>

```

This update replaces the hard-coded cart items with reference to the `cart` property in the store.

## Running the Application

With these changes, your app should be reloaded once again. Add a few items to the shopping cart if the reload has reset the cart back to being empty, then click "Checkout" to go to the shopping cart details page. On this page, increment and decrement some of the items in the cart and try removing one of them by clicking "Remove". You will see the cart widget update accordingly on the right column like below:

!["Update Cart Items - E-commerce App"](https://images.ctfassets.net/23aumh6u8s0i/7xFFbT1x3IfKUxCFT7IDvl/b42328e5782e261ffb3d1a454eba2a8c/svelte_05.jpg)

Perfect!

## Conclusion

In this tutorial, you have been able to implement state management in a Svelte application using a shopping cart demo application.

State management involves a design thinking process where you have to decide which state properties are global (reside in the store) and which state properties are to be localized to the respective components that make use of them. Knowing which state should be local and which state properties should reside in the central store will help you make good design decisions.

If any part of your demonstration is not working as expected, I advise you to go through the article once again to see if there is any step you may have missed. If you need additional help, feel free to reach out in the comments.

Happy coding :)

State Management in Svelte Applications

Learn how to manage state in Vue 3 Applications.

State Management in Vue 3 Applications

Learn how to implement State Management in Vue 2 using Vuex

State Management in Vue 2 Applications

square-2

I develop software for a living, and then I go home and continue thinking about software because I just can’t get enough. I’m a full-stack engineer with infrastructure skills. I’ve led multiple agile delivery teams, being an individual contributor, driving architecture topics, and coaching and supporting other team members.<br>
I believe in high-quality software and advocate for Continuous Delivery, Test-Driven Development, and quick iteration. I <a href="https://hceris.com/blog">write</a> and <a href="https://hceris.com/talks">speak</a> about my experience regularly. Needless to say, all the opinions expressed in this blog are mine and only mine.

Staff Engineer

Mario Fernandez

Traditionally, starting a new React application means adding Redux for state management. Let's talk about the Context API as an alternative

If you're bootstrapping a new [React](https://reactjs.org/) application today, ingrained habits might lead you to pick [Redux](https://redux.js.org/). After all, you **need** to manage the state. _Should you start with Redux, though?_ That has become a valid question. The latest versions of React have improved their offerings for state handling massively. In this post, I want to talk about a simpler approach, using the Context API instead.

## Let's Reminisce: Why Did We Embrace Redux?

A structured approach to state transitions in frontend applications wasn't always the norm. I remember trying to update multiple places in an application back when we were still using jQuery. That wasn't a pleasant experience.

![A change in the application triggers a cascade of updates that is very hard to track](https://images.ctfassets.net/23aumh6u8s0i/7qFbGf6yM0yMZer22wTT00/16ba7438ca2858714830a8b2b23b0070/a-change-triggers-a-cascade-of-updates-and-changes-to-an-application.png)

A change in one place leads to an update somewhere else. Now we need to patch that code as well. But then, there is a third area of the page that depends on the first two. At this point, the logic is convoluted and complex, and the snowball is just getting started.

Compared to that, Redux was eye-opening:

- The complete state of the User Interface (UI) is represented as an object.
- Any action that can modify the state is an object that contains data.
- Pure functions (reducers) ingest those actions and morph the state.
- Through selectors, we shape the data in the state for easy consumption for our components.

It seems self-evident now. But it was magical at the time.

![How changes flow through an application using Redux](https://images.ctfassets.net/23aumh6u8s0i/165hsFXreQt9XPGGSLQ1ju/14550278099b9c50d693cb0e4c096baa/change-flow-through-an-application-using-redux.png)

All the reasons that brought us here still apply. But the context has changed.

## Should Redux Be the Default When Starting a Project?

React's ecosystem has evolved quite a bit lately. Two additions have transformed the landscape and opened new possibilities:

- [Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Context](https://reactjs.org/docs/context.html)

With those two, managing state across a hierarchy tree and triggering side effects is easier than ever. So easy that I claim that Redux is no longer necessary in many cases.

Most frontend applications don't have the rich flow of data that justifies introducing Redux. If you're only fetching some data from an API plus some basic interactions, then Redux is probably overkill.

### The over-abstraction trap

Forms are an example that hit close to home. I've built complex forms using Redux, helped by some supporting libraries. As complexity grows, things get messy. And for what? In the end, the state contained in a form tends to be fairly local. There is little need of exporting a detailed representation of the current state of a bunch of input controls.

Modeling something like a form with Redux can lead to a path of pain. Is the state truly global? A specialized library will often do the job just fine. Nowadays I recommend [Formik](https://formik.org/) for this problem. It's built for that purpose and will cover most requirements you can think of.

## An Alternative: Leveraging the Context API

### What is the Context API?

Let's go to the source to find out:

> Context provides a way to share values between components without having to explicitly pass a prop through every level of the tree.

The Context API is meant to solve the [prop drilling](https://kentcdodds.com/blog/prop-drilling/) problem. You have a component that owns some state. A child component wants to access it. If you pass it through `props` every intermediate component becomes aware of it, even if it's not being used at that level. That adds coupling between the different components that form that part of the page.

I've seen Redux used to handle the challenge of providing state access to components that are further away from the source. For this scenario, the Context API is a valid alternative. One that doesn't need an extra library, bootstrapping code, and further complexity.

### How does it work?

The Context API has two main components. First, we have a `Provider` where we keep the relevant state. It is equivalent to the store in Redux. It can be statically initialized or fetched dynamically. Combined with the `useState` and `useEffect` hooks, we can build the logic we need to keep it up-to-date with little effort.

The second part is the `Consumer`. Any component that is rendered below the `Provider` has access to the information stored in it thanks to it. Another hook, [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext) makes the syntax even more lightweight. Consumers get re-rendered on updates to the state.

Essentially, we're reproducing the store and connecting to the store, which is what we'd do in Redux. But we have far less code and abstractions involved.

### One example: High-level configuration

Let's say we're storing information that is relevant for the whole application. For example, the theme that dictates how other components are displayed. In general, a configuration that influences most components. That probably won't change during the lifetime of the application. If we put it in a `Provider`, every component that needs it can access this state easily.

Theming is such a clear use of Context that it's basically the canonical scenario. It's the example mentioned in React's official documentation as well.

### Another example: Fetching information from a REST API

Imagine you divide your application into subpages, each with its separate URL. The data transfer between pages is limited. Each subpage is practically a small independent application. When you render one of these pages, it needs to fetch data from an API.

However, inside the subpage, the data might be used everywhere. There is no clear component that can assert ownership over the data. I like handling this scenario with the Context API as well. We have a `Provider` that wraps the page and fetches the data asynchronously by contacting a [backend for frontend](https://samnewman.io/patterns/architectural/bff/). That information is stored in the provider. After this, every component on the page uses the data without having to worry about the remote interaction. Thus, we contain that to a component that we test dedicatedly, making the others more independent.

As mentioned, the use of hooks reduces the complexity significantly. Moreover, we avoid having to deal with lifecycle methods, which is a common source of subtle errors.

![A provider retrieves data from a remote endpoint, stores it, and makes it available for consumers](https://images.ctfassets.net/23aumh6u8s0i/3EgqUpLfKTOqDL6PGJIojV/7253922bf0e0f1134b1679e7d5f00702/provider-retrieving-data-from-a-remote-endpoint.png)

### Caveat: The Context API is not for every use case

The Context API is a convenient tool that has a low barrier to adoption. But we have to be aware of its limitations. If the data stored as a value in a `Provider` changes, the whole tree under it will be re-rendered. If you save state that frequently mutates high up in your component hierarchy, that'll lead to flickering. It may compromise the experience of the application. Measuring the performance of your application regularly helps to prevent nasty surprises.

Apart from that, we have to consider how to mutate the state. We can enhance our state stored in the `Provider` with a function to change the state. That way, the components are not merely passive consumers. And closing the cycle, we might long at some point for Redux's Action -> Reducer -> State loop. We can do this as well without Redux.

## Reducers Without Redux

You might be used to Redux's model by now. Modeling state transitions through reducers has become a well-understood problem. It's supported by high-quality libraries like [immer](https://github.com/immerjs/immer). This idea of forsaking Redux sounds scary and revolutionary.

Do not despair, though. You can benefit from Redux's ideas without using Redux the library. The [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) hook brings the power of reducers. Once again, the hook syntax makes the code less dense and easier to follow. You keep using reducers as you were before. As an added benefit, it comes in React out of the box.

## Conclusion

This article is not about rejecting Redux. The ideas behind Redux are as valid as ever. Using Redux makes sense if your application is sufficiently complicated. But considering your circumstances is crucial when making an informed decision. React is constantly improving, and it's getting easier to do state management natively.

Developers tend to have a hard time predicting the evolving needs of a system. Given this fact, I advise [building an evolutionary architecture](https://evolutionaryarchitecture.com/). Try to start simple. If your code is structured thoughtfully, there is always the possibility of adding Redux later, as the requirements become clearer. Likely, you'll never reach this point. This approach thus saves you time and lets you iterate faster in reaching your goals. That is a better alternative than introducing technology for the sake of technology.


Starting a New App With Redux? Consider Context API First

auziros:jeana-tahnk

Jeana has been in the tech industry for 15+ years, both as a communications professional and writer. As Director of Global Communications at Auth0, she works with her internal team and external agencies to amplify the company's visibility worldwide and establish its leadership in the identity industry. When she is not working, she can most likely be found on a field watching one of her three kids playing sports, or cleaning up after her one-year-old retriever who chews everything.

Senior Director, Global Communications

Jeana Tahnk

Identity management leader ranked no. 5 in Washington state



**BELLEVUE, Wash., November 14, 2019 —** The [Auth0](https://auth0.com/) Identity Platform, a product unit within Okta, today announced it ranked #5 in Washington state and #73 nationally on [Deloitte’s Technology Fast 500™](https://www2.deloitte.com/us/en/pages/technology-media-and-telecommunications/topics/north-america-technology-fast-500.html). The list features the 500 fastest growing technology, media, telecommunications, life sciences, and energy tech companies in North America.  

Auth0’s ranking is due to its growth rate of 1,813 percent from 2015 to 2018. Auth0 has achieved consistent and impressive year-over-year growth since its inception in 2013 and has continued throughout 2019 as well. Earlier this year, Auth0 announced a [Series E funding](https://auth0.com/blog/auth0-closes-103m-in-funding-passes-1b-valuation/) round of $103M, remarkable business [growth in EMEA](https://auth0.com/blog/auth0-expands-european-presence-with-customers-in-belenux-and-nordics/) and [Asia-Pacific](https://auth0.com/blog/auth0-doubles-revenue-customers-in-apac-australia-new-zealand/), as well as key appointments to its leadership team. 

“Our placement is truly the accomplishment of our entire team from past to present, and the trust our customers have put in our identity management platform since the beginning,” said Eugenio Pace, CEO, and co-founder of Auth0. “We are honored to have earned our spot, and will continue to work tirelessly to innovate our technology offering and be a valued partner to our customers.”  

## About Deloitte’s 2019 Technology Fast 500™
Now in its 25th year, Deloitte’s Technology Fast 500 provides a ranking of the fastest-growing technology, media, telecommunications, life sciences, and energy tech companies — both public and private — in North America. Technology Fast 500 award winners are selected based on percentage fiscal year revenue growth from 2015 to 2018.
To be eligible for Technology Fast 500 recognition, companies must own proprietary intellectual property or technology that is sold to customers in products that contribute to a majority of the company's operating revenues. Companies must have base-year operating revenues of at least $US50,000, and current-year operating revenues of at least $US5 million. Additionally, companies must be in business for a minimum of four years and be headquartered within North America.

<include src="asides/AboutAuth0" />

## About Deloitte
Deloitte refers to one or more of Deloitte Touche Tohmatsu Limited, a UK private company limited by guarantee (“DTTL”), its network of member firms, and their related entities. DTTL and each of its member firms are legally separate and independent entities. DTTL (also referred to as “Deloitte Global”) does not provide services to clients. In the United States, Deloitte refers to one or more of the US member firms of DTTL, their related entities that operate using the “Deloitte” name in the United States and their respective affiliates. Certain services may not be available to attest clients under the rules and regulations of public accounting. Please see www.deloitte.com/about learn more about our global network of member firms.

### MEDIA CONTACTS
Jeana Tahnk
Global Communications
Auth0
press@auth0.com

Alexandria Plew
Matter for Auth0
auth0@matternow.com


Auth0 Ranked on Deloitte’s 2019 Technology Fast 500™

Learn, through a practical tutorial, how to use Vuex to manage the state of your Vue.js apps the right way.

State Management with Vuex: a Practical Tutorial

kerry-ok

Kerry is a marketer that loves to partner with the sales organization. As our SVP for Marketing, she is focused on sharing the Auth0 narrative across the globe. Before Auth0, Kerry spent many years working in B2B Tech at Skytap and F5 Networks. She spends her spare time with her family, dog, working in the yard, and enjoying fantasy football.

Chief Marketing Officer

Kerry Ok

Watch this recorded webinar with Garrett Bekker, principal analyst at 451 Research, where he discusses the current state of the IAM industry and the benefits of Universal Identity Management



Recently 451 Research’s Principal Analyst Garrett Bekker and Auth0 CMO Lewis Carpenter sat down to discuss solutions to the fragmented identity and access management marketplace. A variety of solutions aim at solving authentication and authorization, but each tends to focus squarely on a single audience, whether it’s consumers (B2C), business partners (B2B), employees (B2E), or IoT devices. This siloed approach makes the process both confusing and costly for those needing identity across the entire organization and beyond.

Fortunately, enterprises are realizing that a universal approach to identity is saving money, time, and most importantly, giving developers the freedom they need to focus on product innovation rather than security. Today’s marketplace demands a more adaptable solution that can handle the rigors of identity, and anticipate the needs of the future.

In this [recorded webinar](https://auth0.com/resources/webinars/need-for-universal-identity-management-webinar), you’ll learn Bekker’s take on the current state of the IAM industry and its evolution, where he believes it needs to go, as well as gain an overview of Auth0’s universal approach to identity.

<include src="asides/AboutAuth0" />


"state management"