الگوهای پیشرفته NGRX برای برنامه های زاویه ای سازمانی

// Feature state interface
export interface DashboardState {
  metrics: Metric[];
  loading: boolean;
  error: string | null;
}

// Basic selectors
export const selectDashboardState = createFeatureSelector<DashboardState>('dashboard');
export const selectAllMetrics = createSelector(
  selectDashboardState,
  (state) => state.metrics
);

// Derived selectors with memoization benefits
export const selectActiveMetrics = createSelector(
  selectAllMetrics,
  (metrics) => metrics.filter(metric => metric.active)
);

// Complex calculations that won't recompute unnecessarily
export const selectMetricsSummary = createSelector(
  selectActiveMetrics,
  (activeMetrics) => {
    // This saves you from running expensive logic every time Angular blinks,
    // Especially important when rendering dashboards or charts
    return {
      total: activeMetrics.reduce((sum, metric) => sum + metric.value, 0),
      average: activeMetrics.length ? 
        activeMetrics.reduce((sum, metric) => sum + metric.value, 0) / activeMetrics.length : 0,
      count: activeMetrics.length
    };
  }
);

// Combining data from multiple slices of state
export const selectUserPermissions = createSelector(
  authSelectors.selectCurrentUser,
  roleSelectors.selectAllRoles,
  (user, roles) => {
    const userRole = roles.find(role => role.id === user?.roleId);
    return userRole?.permissions || [];
  }
);

// Building on existing selectors for dashboard-specific permissions
export const selectUserDashboardPermissions = createSelector(
  selectUserPermissions,
  (permissions) => permissions.filter(p => p.resource === 'dashboard')
);

export interface AuthState {
  user: User | null;
  token: string | null;
  loading: boolean;
  error: string | null;
  lastAuthAttempt: Date | null;
}

export const initialAuthState: AuthState = {
  user: null,
  token: null,
  loading: false,
  error: null,
  lastAuthAttempt: null
};

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

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

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

export const checkAuthStatus = createAction('[Auth] Check Status');
export const logout = createAction('[Auth] Logout');

@Injectable()
export class AuthEffects {
  login$ = createEffect(() => 
    this.actions$.pipe(
      ofType(AuthActions.login),
      exhaustMap(action => 
        // Note: exhaustMap is used here to avoid parallel login attempts
        this.authService.login(action.username, action.password).pipe(
          map(response => {
            // Store token in secure storage
            this.tokenService.storeToken(response.token);
            return AuthActions.loginSuccess({
              user: response.user,
              token: response.token
            });
          }),
          catchError(error => of(AuthActions.loginFailure({ 
            error: error.message || 'Authentication failed' 
          })))
        )
      )
    )
  );

  logout$ = createEffect(() => 
    this.actions$.pipe(
      ofType(AuthActions.logout),
      tap(() => {
        // Clear token on logout
        this.tokenService.removeToken();
        this.router.navigate(['/login']);
      })
    ),
    { dispatch: false }
  );

  // Effect to check auth status on app initialization
  checkAuth$ = createEffect(() => 
    this.actions$.pipe(
      ofType(AuthActions.checkAuthStatus),
      switchMap(() => {
        const token = this.tokenService.getToken();
        if (!token) {
          return of(AuthActions.logout());
        }

        return this.authService.validateToken(token).pipe(
          map(user => AuthActions.loginSuccess({ user, token })),
          catchError(() => of(AuthActions.logout()))
        );
      })
    )
  );

  constructor(
    private actions$: Actions,
    private authService: AuthService,
    private tokenService: TokenService,
    private router: Router
  ) {}
}

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(
    private store: Store,
    private router: Router
  ) {}

  canActivate(): Observable<boolean> {
    return this.store.select(selectIsAuthenticated).pipe(
      tap(isAuthenticated => {
        if (!isAuthenticated) {
          this.router.navigate(['/login']);
        }
      }),
      take(1)
    );
  }
}

@Injectable({
  providedIn: 'root'
})
export class RoleGuard implements CanActivate {
  constructor(
    private store: Store,
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const requiredRole = route.data.role;

    return this.store.select(selectUserRole).pipe(
      map(userRole => userRole === requiredRole),
      tap(hasAccess => {
        if (!hasAccess) {
          this.router.navigate(['/unauthorized']);
        }
      }),
      take(1)
    );
  }
}

export interface User {
  id: string;
  name: string;
  email: string;
  roleId: string;
  active: boolean;
}

export interface UserState extends EntityState<User> {
  selectedUserId: string | null;
  loading: boolean;
  error: string | null;
}

export const adapter = createEntityAdapter<User>({
  selectId: (user) => user.id,
  sortComparer: (a, b) => a.name.localeCompare(b.name) // Optional sort by name
});

export const initialState: UserState = adapter.getInitialState({
  selectedUserId: null,
  loading: false,
  error: null
});

export const userReducer = createReducer(
  initialState,

  // Load operations
  on(UserActions.loadUsers, (state) => ({
    ...state,
    loading: true,
    error: null
  })),
  on(UserActions.loadUsersSuccess, (state, { users }) => 
    adapter.setAll(users, { ...state, loading: false })
  ),

  // Add/update/remove operations
  on(UserActions.addUser, (state, { user }) => 
    adapter.addOne(user, state)
  ),
  on(UserActions.updateUser, (state, { update }) => 
    adapter.updateOne(update, state)
  ),
  on(UserActions.deleteUser, (state, { id }) => 
    adapter.removeOne(id, state)
  ),

  // Selection state
  on(UserActions.selectUser, (state, { id }) => ({
    ...state,
    selectedUserId: id
  }))
);

export const { selectIds, selectEntities, selectAll, selectTotal } = 
  adapter.getSelectors(createFeatureSelector<UserState>('users'));

// Extended selectors
export const selectSelectedUserId = createSelector(
  createFeatureSelector<UserState>('users'),
  (state) => state.selectedUserId
);

export const selectSelectedUser = createSelector(
  selectEntities,
  selectSelectedUserId,
  (entities, selectedId) => selectedId ? entities[selectedId] : null
);

export const selectActiveUsers = createSelector(
  selectAll,
  (users) => users.filter(user => user.active)
);

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, 
      autoPause: true, // Pauses recording actions when the browser tab is not active
      trace: !environment.production, // Include stack trace for dispatched actions
      traceLimit: 75, // Maximum stack trace frames to be stored
      connectOutsideZone: true // Connect outside Angular's zone for better performance
    })
  ]
})
export class AppModule {}

export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
  return function(state, action) {
    const nextState = reducer(state, action);

    console.group(action.type);
    console.log(`%c prev state`, 'color: #9E9E9E; font-weight: bold', state);
    console.log(`%c action`, 'color: #03A9F4; font-weight: bold', action);
    console.log(`%c next state`, 'color: #4CAF50; font-weight: bold', nextState);
    console.groupEnd();

    return nextState;
  };
}

export const metaReducers: MetaReducer<State>[] = !environment.production ? [debug] : [];

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, { metaReducers })
  ]
})
export class AppModule {}

// Root state interface
export interface AppState {
  router: RouterReducerState<any>;
  auth: AuthState;
}

// Extended with lazy-loaded feature states
export interface State extends AppState {
  users?: UserState;
  dashboard?: DashboardState;
  reports?: ReportState;
}

@NgModule({
  imports: [
    CommonModule,
    StoreModule.forFeature('users', userReducer),
    EffectsModule.forFeature([UserEffects]),
    // ...other module imports
  ],
  declarations: [
    UserListComponent,
    UserDetailComponent,
    // ...other components
  ]
})
export class UserModule {}

// Instead of nested data:
const badlyNestedState = {
  departments: [
    {
      id: 'dept1',
      name: 'Engineering',
      employees: [
        { id: 'emp1', name: 'Alice', projects: [...] },
        { id: 'emp2', name: 'Bob', projects: [...] }
      ]
    }
  ]
};

// Use normalized state with references:
const normalizedState = {
  departments: {
    ids: ['dept1', 'dept2'],
    entities: {
      'dept1': { id: 'dept1', name: 'Engineering', employeeIds: ['emp1', 'emp2'] },
      'dept2': { id: 'dept2', name: 'Marketing', employeeIds: ['emp3', 'emp4'] }
    }
  },
  employees: {
    ids: ['emp1', 'emp2', 'emp3', 'emp4'],
    entities: {
      'emp1': { id: 'emp1', name: 'Alice', projectIds: ['proj1', 'proj2'] },
      'emp2': { id: 'emp2', name: 'Bob', projectIds: ['proj1'] },
      // ...other employees
    }
  },
  projects: {
    ids: ['proj1', 'proj2', 'proj3'],
    entities: {
      'proj1': { id: 'proj1', name: 'Dashboard Redesign' },
      // ...other projects
    }
  }
};