ื“ืœื’ ืœืชื•ื›ืŸ ื”ืจืืฉื™

State Management

NgRx-based state management for the Angular frontend.

Overviewโ€‹

Ever Gauzy uses NgRx for global state management alongside Angular services for local component state.

Store Structureโ€‹

AppState
โ”œโ”€โ”€ auth         โ†’ User, token, permissions
โ”œโ”€โ”€ organization โ†’ Current organization
โ”œโ”€โ”€ employee     โ†’ Current employee context
โ”œโ”€โ”€ navigation   โ†’ Sidebar, breadcrumbs
โ”œโ”€โ”€ layout       โ†’ Theme, sidebar state
โ””โ”€โ”€ feature stores (lazy-loaded)
    โ”œโ”€โ”€ employees
    โ”œโ”€โ”€ projects
    โ”œโ”€โ”€ tasks
    โ””โ”€โ”€ time-tracker

Patternsโ€‹

Actionsโ€‹

export const login = createAction(
  "[Auth] Login",
  props<{ email: string; password: string }>(),
);

export const loginSuccess = createAction(
  "[Auth] Login Success",
  props<{ user: IUser; token: string }>(),
);

export const loginFailure = createAction(
  "[Auth] Login Failure",
  props<{ error: string }>(),
);

Reducersโ€‹

export const authReducer = createReducer(
  initialState,
  on(loginSuccess, (state, { user, token }) => ({
    ...state,
    user,
    token,
    isAuthenticated: true,
  })),
  on(loginFailure, (state, { error }) => ({
    ...state,
    error,
    isAuthenticated: false,
  })),
);

Effectsโ€‹

@Injectable()
export class AuthEffects {
  login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(login),
      switchMap(({ email, password }) =>
        this.authService.login(email, password).pipe(
          map((result) => loginSuccess(result)),
          catchError((error) => of(loginFailure({ error }))),
        ),
      ),
    ),
  );
}

Selectorsโ€‹

export const selectAuth = createFeatureSelector<AuthState>("auth");
export const selectCurrentUser = createSelector(
  selectAuth,
  (state) => state.user,
);
export const selectIsAuthenticated = createSelector(
  selectAuth,
  (state) => state.isAuthenticated,
);

Service-Based Stateโ€‹

For simpler component state, services with BehaviorSubject:

@Injectable({ providedIn: "root" })
export class OrganizationService {
  private selectedOrganization$ = new BehaviorSubject<IOrganization>(null);

  get organization$(): Observable<IOrganization> {
    return this.selectedOrganization$.asObservable();
  }

  setOrganization(org: IOrganization): void {
    this.selectedOrganization$.next(org);
  }
}