Đào sâu NgRx: Khám phá các mẫu thiết kế nâng cao cho ứng dụng Angular quy mô lớn

Lê Lân

10/07/2025

Hướng Dẫn Nâng Cao Sử Dụng NgRx Cho Ứng Dụng Angular Doanh Nghiệp

Mở Đầu

Bạn đã từng cảm thấy mệt mỏi với việc quản lý trạng thái phức tạp trong các ứng dụng Angular lớn? Những vấn đề như quan sát viên lồng nhau (nested observables), tính toán dư thừa, và việc tái render không cần thiết có làm bạn đau đầu?

Trong chuỗi bài viết về NgRx này, sau khi đã đi qua những kiến thức cơ bản và những mẫu thiết kế trung cấp, chúng ta sẽ khám phá các mẫu thiết kế nâng cao giúp bạn quản lý trạng thái hiệu quả trong các ứng dụng Angular quy mô lớn. Những kỹ thuật dưới đây là kết quả của kinh nghiệm nhiều dự án doanh nghiệp, nhằm giúp bạn giữ cho ứng dụng của mình luôn mượt mà, dễ bảo trì và mở rộng. Hãy cùng bắt đầu để tối ưu hóa trải nghiệm phát triển Angular với NgRx!

Tối Ưu Hiệu Suất Với Selectors

Sức Mạnh Của Selectors Memoized

Selectors trong NgRx giúp bạn tính toán và trích xuất dữ liệu một cách hiệu quả mà không gây ra việc tái tính toán không cần thiết nhờ cơ chế memoization.

// Định nghĩa giao diện trạng thái feature
export interface DashboardState { 
  metrics: Metric[]; 
  loading: boolean; 
  error: string | null;
}

// Các selector cơ bản
export const selectDashboardState = createFeatureSelector<DashboardState>('dashboard');
export const selectAllMetrics = createSelector(
  selectDashboardState,
  (state) => state.metrics
);

// Selector dẫn xuất với memoization
export const selectActiveMetrics = createSelector(
  selectAllMetrics,
  (metrics) => metrics.filter(metric => metric.active)
);

// Tính toán phức tạp không phải thực hiện lại không cần thiết
export const selectMetricsSummary = createSelector(
  selectActiveMetrics,
  (activeMetrics) => {
    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
    };
  }
);

Sử dụng selectors memoized sẽ giúp tránh việc component tái render không cần thiết, giữ cho quá trình phát hiện thay đổi (change detection) của Angular luôn hiệu quả. Đặc biệt hữu ích khi xử lý các giao diện dữ liệu nặng như dashboard hoặc bảng biểu.

Tổ Hợp Selectors Cho Các Biến Đổi Dữ Liệu Phức Tạp

Khi ứng dụng mở rộng, bạn nên xây dựng các selector nhỏ, chuyên biệt và kết hợp chúng lại với nhau để giữ mã nguồn rõ ràng và dễ bảo trì.

// Kết hợp dữ liệu từ nhiều phần state khác nhau
export const selectUserPermissions = createSelector(
  authSelectors.selectCurrentUser,
  roleSelectors.selectAllRoles,
  (user, roles) => {
    const userRole = roles.find(role => role.id === user?.roleId);
    return userRole?.permissions || [];
  }
);

// Tạo selector dẫn xuất permission theo dashboard
export const selectUserDashboardPermissions = createSelector(
  selectUserPermissions,
  (permissions) => permissions.filter(p => p.resource === 'dashboard')
);

Phương pháp tổ hợp selectors giúp các nhóm phát triển có thể làm việc song song mà không trùng lặp logic, tăng khả năng tái sử dụng và đồng nhất trạng thái.

Quản Lý Xác Thực Và Bảo Mật Với NgRx

Thiết Kế Trạng Thái Xác Thực

Một cấu trúc trạng thái xác thực thực tiễn bao gồm các trường lưu trữ thông tin người dùng, token, trạng thái tải và lỗi:

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

Các Action Xác Thực Cụ Thể

Việc định nghĩa các action rõ ràng giúp bạn dễ dàng debug và quản lý:

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');

Hiệu Ứng Quản Lý Token Xác Thực

@Injectable()
export class AuthEffects {
  login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AuthActions.login),
      exhaustMap(action =>
        this.authService.login(action.username, action.password).pipe(
          map(response => {
            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(() => {
        this.tokenService.removeToken();
        this.router.navigate(['/login']);
      })
    ),
    { dispatch: false }
  );

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

Tập trung quản lý token và trạng thái xác thực qua hiệu ứng giúp bảo đảm tính nhất quán trên toàn ứng dụng và giảm thiểu lỗi bảo mật.

Định Tuyến Bảo Vệ Bằng Guards

Các guard giúp ngăn chặn truy cập không hợp lệ dựa trên trạng thái xác thực và quyền hạn:

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

Guards được thiết kế theo cách dễ dàng kiểm thử với mock Store giúp bạn phát hiện lỗi sớm và bảo vệ ứng dụng khỏi các lộ trình truy cập trái phép.

Quản Lý Bộ Sưu Tập Dữ Liệu Với
ngrx/entity

Cấu Hình Adapter Quản Lý Entity

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

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

Reducer Xử Lý Các Tác Vụ Thường Gặp

export const userReducer = createReducer(
  initialState,
  on(UserActions.loadUsers, (state) => ({ ...state, loading: true, error: null })),
  on(UserActions.loadUsersSuccess, (state, { users }) => adapter.setAll(users, { ...state, loading: false })),
  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)),
  on(UserActions.selectUser, (state, { id }) => ({ ...state, selectedUserId: id }))
);

Selector Entity Tối Ưu Truy Xuất Dữ Liệu

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

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

Sử dụng

ngrx/entity

giúp giảm đáng kể độ phức tạp trong xử lý danh sách và cải thiện hiệu suất khi quản lý các collections lớn.

Debugging & Khắc Phục Sự Cố Trong Ứng Dụng NgRx

Tích Hợp Redux DevTools

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
      autoPause: true,
      trace: !environment.production,
      traceLimit: 75,
      connectOutsideZone: true
    })
  ]
})
export class AppModule {}

Redux DevTools là trợ thủ đắc lực giúp bạn theo dõi lịch sử trạng thái và lần theo các nguồn gốc gây lỗi dễ dàng và nhanh chóng.

Meta-Reducers Tùy Chỉnh Để Ghi Log

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

Meta-reducers giúp bạn minh bạch thao tác thay đổi trạng thái, cực kỳ hữu ích khi gỡ lỗi nhưng nên tắt trong môi trường production để tránh ảnh hưởng hiệu suất.

Mở Rộng Kiến Trúc State Khi Ứng Dụng Phát Triển

Mô Hình Composition State Theo Tính Năng

// Giao diện root state
export interface AppState {
  router: RouterReducerState<any>;
  auth: AuthState;
}

// Giao diện state mở rộng với lazy-loaded feature states
export interface State extends AppState {
  users?: UserState;
  dashboard?: DashboardState;
  reports?: ReportState;
}

Module Ủy quyền Quản Lý Feature State Động

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

Việc phân chia state theo module tính năng cho phép các nhóm phát triển quản lý trạng thái độc lập, đồng thời giữ được tính nhất quán và khả năng mở rộng cao.

Chuẩn Hóa Trạng Thái Cho Mối Quan Hệ Phức Tạp

Thay vì dùng các đối tượng lồng nhau gây khó khăn cho việc cập nhật:

// Ví dụ trạng thái lồng nhau kém hiệu quả
const badlyNestedState = {
  departments: [
    {
      id: 'dept1',
      name: 'Engineering',
      employees: [
        { id: 'emp1', name: 'Alice', projects: [...] },
        { id: 'emp2', name: 'Bob', projects: [...] }
      ]
    }
  ]
};

Sử dụng chuẩn hóa để tách biệt entities và lưu 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'] },
      // ...
    }
  },
  projects: {
    ids: ['proj1', 'proj2', 'proj3'],
    entities: {
      'proj1': { id: 'proj1', name: 'Dashboard Redesign' },
      // ...
    }
  }
};

Mặc dù tăng chút công sức ban đầu, chuẩn hóa trạng thái giúp bạn giảm thiểu lỗi và dễ dàng mở rộng, cập nhật dữ liệu phức tạp về sau.

Kết Luận: Tích Hợp Các Mẫu Thiết Kế Nâng Cao

Qua chuỗi bài viết về NgRx, chúng ta đã đi từ những kiến thức cơ bản đến các mẫu thiết kế nâng cao, giúp ứng dụng Angular doanh nghiệp của bạn xử lý trạng thái một cách hiệu quả, sạch sẽ và dễ bảo trì.

Điểm mấu chốt:

Sử dụng selectors memoized để tránh tính toán thừa và tái render không cần thiết

Tập trung logic xác thực vào hiệu ứng giúp bảo mật đồng nhất

Áp dụng
ngrx/entity
để quản lý bộ sưu tập với hiệu suất tốt nhất

Trang bị công cụ debug như Redux DevTools và meta-reducers để theo dõi trạng thái

Phân chia state theo từng module để tổ chức mã nguồn theo nhóm

Bạn đã áp dụng những mẫu nào trong dự án của mình? Có những anti-pattern nào bạn gặp phải? Hãy chia sẻ kinh nghiệm của bạn trong phần bình luận để chúng ta cùng học hỏi!

Nếu chuỗi bài này hữu ích, đừng ngần ngại chia sẻ với những đồng nghiệp Angular của bạn đang gặp khó khăn về quản lý trạng thái!

Chúc bạn lập trình vui vẻ và thành công với NgRx!

Tham Khảo

Michael Gokey – Building a Multi-Module Angular Application with NgRx (Part 1)

Michael Gokey – NgRx State Management Across Angular Modules (Part 2)

Official NgRx Documentation – https://ngrx.io/

Redux DevTools Extension – https://github.com/reduxjs/redux-devtools

Angular Router Guards – https://angular.io/guide/router#guards