Phiên bản 15 của NgRx đã giới thiệu các API độc lập cho gói, cho phép sử dụng NgRx với các ứng dụng Góc dựa trên thành phần độc lập . Điều này cho phép tích hợp NgRx vào ứng dụng của bạn đơn giản hơn.

Nx đã thêm hỗ trợ để sử dụng các API độc lập này từ NgRx khi tạo các cửa hàng NgRx bằng @nrwl/angular:ngrxtrình tạo của chúng tôi khi bạn cung cấp cho nó đường dẫn đến Routestệp định nghĩa. (Thường ký hiệu là *.routes.ts)

Trong bài viết này, chúng ta sẽ hướng dẫn sử dụng Nx để tạo một ứng dụng Angular dựa trên Thành phần độc lập mới và thêm NgRx vào đó, CHỈ sử dụng Trình tạo Nx!

Thích một phiên bản video? Chúng tôi đã có bạn bảo hiểm!

Tạo một không gian làm việc Nx mới

npx create-nx-workspace myorg

Lựa chọn:

• Ứng dụng góc độc lập
• Có để sử dụng Thành phần độc lập
• Có để thêm định tuyến
• Bất kỳ tùy chọn nào cho định dạng biểu định kiểu
• Có với Nx Cloud

Bây giờ hãy chạy cd myorgđể vào không gian làm việc.

Giao src/main.tsdiện sẽ khác với những gì bạn nhớ với các ứng dụng Angular dựa trên NgModule tiêu chuẩn.

Bạn sẽ thấy một cái gì đó tương tự như

import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())],
}).catch((err) => console.error(err));

Nx cũng sẽ hỗ trợ điều này!

Tạo trạng thái gốc

nx g @nrwl/angular:ngrx --root --parent=src/main.ts

Bạn sẽ được yêu cầu đặt tên cho trạng thái tính năng, nhưng bạn có thể bỏ qua điều này và chỉ cần nhấn enter trong thiết bị đầu cuối của mình, điều này là không cần thiết ở giai đoạn này.

Nói sai với Facades cũng được.

Bây giờ trình tạo sẽ thực hiện các thay đổi đối với main.tstệp của bạn và cài đặt các gói NgRx cho bạn!

Tập tin của bạn main.tsbây giờ sẽ trông như thế này

import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';
import { provideStore, provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';

bootstrapApplication(AppComponent, {
  providers: [
    provideEffects(),
    provideStore(),
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
  ],
}).catch((err) => console.error(err));

Tạo thư viện tính năng mới

NgRx hoạt động tốt hơn khi bạn phân chia cửa hàng của mình dựa trên các tính năng bạn có trong ứng dụng của mình. Đây là một trường hợp sử dụng khá phổ biến. Nx cho phép bạn làm điều này rất dễ dàng và theo một cách rất có cấu trúc.

Trước tiên, hãy tạo một thư viện tính năng mới, được gọi là feature-users, trong Nx sẽ chứa mọi thứ liên quan đến tính năng của chúng ta, bao gồm cả Trạng thái NgRx.

nx g @nrwl/angular:lib feature-users --standalone --routing --lazy --parent=src/app/app.routes.ts

Lệnh này thực hiện một số điều:

• Nó tạo một thư viện mới trong Nx Workspace của chúng tôi
• Nó sử dụng Thành phần độc lập góc làm điểm vào
• Nó thêm cấu hình định tuyến vào thư viện và thêm thành phần làm tuyến mặc định.
• Nó sẽ thêm một tuyến tải chậm vào app.routes.tstệp của ứng dụng, kết nối ứng dụng với thư viện!

src/app/app.routes.ts
feature-users/src/lib/lib.routes.ts

Thêm trạng thái tính năng vào thư viện tính năng

Bây giờ chúng ta có một thư viện tính năng cho tính năng người dùng của mình, hãy tạo trạng thái tính năng! Nó đơn giản như một lệnh.

nx g @nrwl/angular:ngrx users --parent=feature-users/src/lib/lib.routes.ts --route=''

Bạn sẽ được hỏi liệu đây có phải là trạng thái gốc của ứng dụng hay không, hãy nhập N. Sau đó nói không với Mặt tiền (trừ khi bạn thực sự muốn chúng).

Tùy --routechọn ở đây được sử dụng để chỉ ra những gì routetrong tệp định nghĩa tuyến đường của chúng tôi ( lib.routes.ts) sẽ có trạng thái được đính kèm với nó. Điều này là để cho phép các API độc lập NgRx được đính kèm vào tuyến đường đó.

Chúng ta có thể thấy rằng nếu chúng ta nhìn vào lib.routes.tstập tin

import { Route } from '@angular/router';
import { FeatureUsersComponent } from './feature-users/feature-users.component';
import { provideStore, provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import * as fromUsers from './+state/users.reducer';
import { UsersEffects } from './+state/users.effects';

export const featureUsersRoutes: Route[] = [
  {
    path: '',
    component: FeatureUsersComponent,
    providers: [
      provideState(fromUsers.USERS_FEATURE_KEY, fromUsers.usersReducer),
      provideEffects(UsersEffects),
    ],
  },
];

• hành động
• hộp giảm tốc
• Bộ chọn
• Các hiệu ứng

Nếu bạn muốn xác nhận việc tích hợp, bạn có thể chạy các lệnh sau và xem kết quả đầu ra thành công!

nx build

nx test

nx test feature-users

Phần kết luận

Hướng dẫn này đã chỉ ra cách dễ dàng để thiết lập NgRx với Nx và cách tận dụng các API độc lập mới nhất với ứng dụng của bạn. Tất cả chỉ với 5 lệnh Nx!

Với lộ trình Angular hướng tới các Thành phần độc lập trở thành tùy chọn ưa thích để phát triển các ứng dụng Angular, sự hỗ trợ này sẽ rất quan trọng trong tương lai và Nx sẽ giúp bạn đạt được điều đó với DX tốt nhất có thể!

Nhân tiện, bạn có biết bây giờ bạn có thể dàn dựng một không gian làm việc Angular Nx cho một dự án tận dụng đầy đủ các API độc lập không? Kiểm tra nó ra ở đây:https://youtu.be/Hi3aJ0Rlkls

Bạn có thể kiểm tra kho lưu trữ ví dụ đã được tạo theo các bước ở trên tại đây:https://github.com/Coly010/nx-ngrx-standalone

Tìm hiểu thêm

Nx Docs
‍ Nx GitHub
Cộng đồng Nrwl Slack
Kênh Youtube Nrwl
Khóa học Egghead miễn phí
Bạn cần trợ giúp về Angular, React, Monorepos, Lerna hoặc Nx? Nói chuyện với chúng tôi

Ngoài ra, nếu bạn thích nội dung này, hãy nhấp vào và đảm bảo theo dõi Colum và Nx trên Twitter để biết thêm thông tin!