استفاده از APIهای مستقل NgRx با Nx

نسخه 15 NgRx APIهای مستقل را به بسته معرفی کرد و استفاده از NgRx را با برنامه های Angular مبتنی بر کامپوننت مستقل امکان پذیر کرد. این امکان ادغام ساده NgRx را با برنامه شما فراهم می کند.

Nx پشتیبانی از استفاده از این APIهای مستقل از NgRx را هنگام ایجاد فروشگاه‌های NgRx با ما اضافه کرده است. @nrwl/angular:ngrx ژنراتور زمانی که به آن مسیری به a می دهید Routes فایل تعریف (معمولا با *.routes.ts)

در این مقاله، با استفاده از Nx برای ایجاد یک برنامه Angular مبتنی بر کامپوننت مستقل و اضافه کردن NgRx به آن، با استفاده از فقط ژنراتورهای Nx!

اگر یک ویدیو را ترجیح می دهید، ما یکی داریم!
https://www.youtube.com/watch?v=fp9E5G9C61Q

یک فضای کاری Nx جدید ایجاد کنید

npx create-nx-workspace myorg

انتخاب کنید:
اپلیکیشن Angular مستقل
بله برای استفاده از اجزای مستقل
بله برای اضافه کردن مسیریابی
هر گزینه ای برای قالب شیوه نامه
برای Nx Cloud بله

نتیجه باید چیزی شبیه به این باشد:

حالا اجرا کن cd myorg برای ورود به فضای کاری

را src/main.ts باید با برنامه های استاندارد Angular مبتنی بر NgModule متفاوت از آنچه به یاد دارید به نظر برسد.

شما باید چیزی شبیه به آن را ببینید

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

این مهم است، زیرا این فایلی است که ارائه دهندگان NgRx ریشه شما باید در آن قرار گیرند providers گزینه از bootstrapApplication تابع.

Nx نیز به این امر کمک خواهد کرد!

حالت ریشه را ایجاد کنید

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

از شما نامی برای وضعیت ویژگی خواسته می شود، اما می توانید این را نادیده بگیرید و به سادگی اینتر را در ترمینال خود فشار دهید، در این مرحله لازم نیست.

به Facades هم دروغ بگویید.

اکنون ژنراتور تغییراتی را در شما ایجاد می کند main.ts بسته های NgRx را برای شما فایل و نصب کنید!

شما main.ts اکنون فایل باید به این شکل باشد

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

به اضافه شدن آن توجه کنید provideEffects() و provideStore() به providers آرایه.

یک کتابخانه ویژگی جدید ایجاد کنید

وقتی فروشگاه خود را بر اساس ویژگی هایی که در برنامه خود دارید تقسیم کنید، NgRx بهتر کار می کند. این یک مورد استفاده بسیار رایج است. Nx به شما این امکان را می دهد که این کار را خیلی راحت و به روشی بسیار ساختار یافته انجام دهید.

ابتدا بیایید یک کتابخانه ویژگی جدید به نام ایجاد کنیم feature-users، در Nx که همه چیز مربوط به ویژگی ما از جمله حالت NgRx را در خود جای می دهد.

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

این دستور چند کار را انجام می دهد:

این یک کتابخانه جدید در فضای کاری Nx ما ایجاد می کند
از یک Angular Standalone Component به عنوان نقطه ورودی استفاده می کند
یک پیکربندی مسیریابی به کتابخانه اضافه می کند و جزء را به عنوان مسیر پیش فرض اضافه می کند.
این یک مسیر تنبل لود شده به برنامه اضافه می کند app.routes.ts فایل، سیم کشی برنامه به کتابخانه!

برخی از فایل هایی که ممکن است بخواهید در زمان خود کاوش کنید عبارتند از:

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

حالت ویژگی را به کتابخانه ویژگی اضافه کنید

اکنون که ما یک کتابخانه ویژگی برای ویژگی کاربران خود داریم، بیایید حالت ویژگی را ایجاد کنیم! به سادگی یک فرمان است.

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

از شما پرسیده می شود که آیا این حالت اصلی برنامه است، وارد کنید N. سپس به Facades نه بگویید (مگر اینکه واقعاً آنها را بخواهید).

را --route گزینه در اینجا برای دیکته کردن چه چیزی استفاده می شود route در فایل تعریف مسیرهای ما (lib.routes.ts) باید حالت متصل به آن داشته باشد. این اجازه می دهد تا API های مستقل NgRx به آن مسیر متصل شوند.

اگر به آن نگاه کنیم می توانیم متوجه شویم lib.routes.ts فایل

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

دستور نیز ما را ایجاد کرده است

و با آن، ما اکنون NgRx را نصب و در برنامه خود ادغام کرده ایم!

اگر می‌خواهید ادغام را تأیید کنید، می‌توانید دستورات زیر را اجرا کنید و خروجی‌های موفق را ببینید!

nx build

nx test

nx test feature-users

نتیجه

این راهنما نشان داده است که تنظیم NgRx با Nx چقدر آسان است و چگونه می‌توانید از آخرین APIهای مستقل با برنامه خود استفاده کنید. همه فقط با 5 دستور Nx!

با توجه به نقشه راه Angular که به اجزای مستقل تبدیل به گزینه ترجیحی برای توسعه برنامه های Angular می شود، این پشتیبانی در آینده بسیار مهم خواهد بود و Nx به شما کمک می کند تا با بهترین DX ممکن به آن برسید!

می‌توانید مخزن نمونه‌ای را که طبق مراحل بالا ایجاد شده است، در اینجا بررسی کنید: https://github.com/Coly010/nx-ngrx-standalone

بیشتر بدانید

🧠 Nx Docs
👩‍💻 Nx GitHub
💬 Nrwl Community Slack
📹 کانال یوتیوب Nrwl
🥚 دوره رایگان Egghead
🧐 برای Angular، React، Monorepos، Lerna یا Nx به کمک نیاز دارید؟ با ما صحبت کن 😃

همچنین اگر این را دوست داشتید، روی 👏 کلیک کنید و حتما دنبال کنید ستون و Nx در توییتر برای اطلاعات بیشتر!