AngularFront end

Sử dụng NgRx để quản lý state trong Angular

Thương Phạm

24/02/2025

3 Min Read

244 Views

0 Comments

1. Giới Thiệu NgRx

NgRx là một thư viện quản lý state (trạng thái) trong Angular dựa trên Redux, giúp ứng dụng quản lý dữ liệu một cách nhất quán và dễ dàng mở rộng. NgRx tận dụng mô hình unidirectional data flow (luồng dữ liệu một chiều) để giúp lập trình viên kiểm soát dữ liệu hiệu quả. Điều này rất hữu ích trong các ứng dụng Angular có quy mô lớn, khi việc quản lý state trở nên phức tạp và khó kiểm soát.

Bằng cách sử dụng NgRx, bạn có thể đảm bảo rằng dữ liệu luôn đồng nhất giữa các components trong ứng dụng. Điều này cũng giúp cải thiện hiệu suất bằng cách tối ưu hóa việc render UI, vì chỉ những phần cần thay đổi mới được cập nhật.

2. Quản Lý State Là Gì?

State management (quản lý trạng thái) là một khái niệm quan trọng trong lập trình ứng dụng, đặc biệt là các ứng dụng web phức tạp. State là dữ liệu hoặc thông tin đại diện cho trạng thái hiện tại của ứng dụng. Việc quản lý state hiệu quả giúp đảm bảo ứng dụng hoạt động mượt mà, dữ liệu đồng bộ giữa các components và tránh các lỗi khó khắc phục.

Các Loại State Trong Ứng Dụng Angular

1. Local State: Trạng thái được quản lý trong một component cụ thể, chỉ ảnh hưởng đến chính component đó.
2. Shared State: Trạng thái được chia sẻ giữa nhiều component, thường cần một cơ chế quản lý như NgRx Store để duy trì dữ liệu nhất quán.
3. Remote State: Dữ liệu được lấy từ một nguồn bên ngoài như API hoặc cơ sở dữ liệu.

Sử dụng NgRx Store giúp xử lý shared state một cách rõ ràng và dễ bảo trì hơn so với việc truyền dữ liệu thông qua Input/Output hoặc Services.

3. Kiến Trúc Của NgRx

NgRx có kiến trúc gồm các thành phần chính:

• Store: Lưu trữ trạng thái toàn cục của ứng dụng.
• Actions: Định nghĩa các sự kiện để thay đổi trạng thái.
• Reducers: Hàm xử lý thay đổi trạng thái dựa vào Actions.
• Effects: Xử lý các tác vụ bất đồng bộ như gọi API.
• Selectors: Lọc dữ liệu từ Store để sử dụng trong component.
• Entities: Hỗ trợ quản lý dữ liệu dạng danh sách một cách hiệu quả hơn.
• Store Devtools: Công cụ hỗ trợ debug và theo dõi trạng thái trong ứng dụng.

Quy Trình Hoạt Động

1. Component gửi Action để yêu cầu thay đổi state.
2. Action được Reducer xử lý để tạo ra state mới.
3. Nếu Action cần thao tác bất đồng bộ (gọi API), nó sẽ được xử lý bởi Effect trước khi gửi dữ liệu về Reducer.
4. Component sử dụng Selectors để lấy dữ liệu từ Store và hiển thị lên UI.

4. Cài Đặt NgRx Trong Angular

Trước tiên, bạn cần cài đặt các gói cần thiết:

npm install @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/entity @ngrx/router-store --save

Ngoài ra, nếu muốn tích hợp Redux DevTools, bạn có thể thêm:

npm install @angular-devkit/schematics --save-dev

5. Khởi Tạo Store

Trong ứng dụng Angular, bạn cần khởi tạo Store bằng cách thêm StoreModule vào AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { itemReducer } from './store/item.reducer';
import { ItemEffects } from './store/item.effects';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ item: itemReducer }),
    EffectsModule.forRoot([ItemEffects]),
    StoreDevtoolsModule.instrument({ maxAge: 25 }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. Kết Luận

Sử dụng NgRx giúp Angular quản lý trạng thái tốt hơn, đặc biệt trong các ứng dụng lớn. Các bước cơ bản gồm:

1. Cài đặt NgRx.
2. Khởi tạo Store trong AppModule.
3. Tạo Actions để mô tả các thay đổi.
4. Viết Reducer để cập nhật state.
5. Dùng Selectors để truy vấn dữ liệu.
6. Dùng Effects để xử lý tác vụ bất đồng bộ.
7. Sử dụng Store trong Component để hiển thị dữ liệu và thực hiện các thay đổi.
8. Tận dụng NgRx Entity để quản lý danh sách dữ liệu tốt hơn.
9. Sử dụng Redux DevTools để debug state dễ dàng hơn.

Việc sử dụng NgRx có thể phức tạp, nhưng khi áp dụng đúng cách, nó giúp ứng dụng Angular hoạt động hiệu quả và dễ bảo trì hơn.