Angular & RXJS: ردیابی وضعیت CRUD ریز دانه در لیست داده ها (به لطف Groupby 🙏)

مقاله نشان می دهد که چگونه می توان درخواست API را برای هر یک از لیست های یک لیست اعمال کرد ، وضعیت بارگیری آن را نمایش داده و درخواست ها را به صورت موازی اجرا کند.

مثالی پیدا خواهید کرد که می توانید در برنامه های خود استفاده کنید.

در اینجا یک مثال آورده شده است:

برای انجام این کار به راحتی ، من گروه اپراتور را به شما ارائه می دهم که با یک اپراتور سفارشی دیگر که اغلب از “بیان شده” استفاده می کنم استفاده خواهیم کرد.

برای پیدا کردن وضعیت بارگیری یک درخواست ، اپراتور “اعلام شده” را ایجاد کنید

StatessTream اپراتور به شما امکان می دهد وضعیت بارگیری یک درخواست ناهمزمان را بدانید ، من بیشتر اوقات در طول تماس API از آن استفاده می کنم.

این عمل شبیه به httpressource از زاویه ای است ، به جز این که ما در زمینه مشاهدات باقی می مانند.

updateItem$
  .pipe(
    switchMap((updateItem) => // everytime, updateItem$ emit a new value, it cancels the existing api call, and create a new API
      statedStream(updateApiCall$(updateItem), updateItem)
    )
  )
  .subscribe((data) => console.log('data', data));

به جای انتظار برای دریافت یک مقدار واحد در هنگام پایان تماس API ، اظهار داشت که با نشان دادن بارگیری درخواست ، مقدار اول را ایجاد می کند (بارگیری: درست است).

در اینجا بخشی از کد StatStream آورده شده است:

export function statedStream<T>(
  toCall: Observable<T>,
  initialValue: T
): Observable<SatedStreamResult<T>> {
  return toCall.pipe(
    map(
      (result) =>
        ({
          isLoading: false,
          isLoaded: true,
          hasError: false,
          error: undefined,
          result,
        } satisfies SatedStreamResult<T>)
    ),
    startWith({
      isLoading: true,
      isLoaded: false,
      hasError: false,
      error: undefined,
      result: initialValue,
    }),
    catchError((error) =>
      of({
        isLoading: false,
        isLoaded: false,
        hasError: true,
        error,
        result: initialValue,
      })
    )
  );
}

توجه داشته باشید که اگر عادت ندارید با جریان های قابل مشاهده کار کنید ، اگر تماس API خطایی را برگرداند ، جریان شما متوقف می شود و دیگر به برنامه های منبع بعدی گوش نمی دهید (در اینجا به روز رسانی $).

به لطف عملکرد بیان شده ، خطاها “کشتی” هستند و در نتیجه بهبود می یابند. این به شما امکان می دهد جریان را در طی یک خطای API بشکنید و به درخواست های جدید ادامه دهید.

در اینجا یک لینک stackblitz برای دیدن این عملکرد با جزئیات وجود دارد

پتانسیل تایتانیک گروه اپراتور را باز کنید

من نمی دانم که آیا شما قبلاً از گروه اپراتور RXJS استفاده کرده اید؟ شخصاً ، وقتی اولین بار دکتر را خواندم ، نفهمیدم. دهمین بار یا … اما به لطف این مثال ، فهمیدم. از آن زمان ، من می فهمم

اگر می خواهید Doc را بخوانید ، دریغ نکنید ، نمونه ای از StackBlitz نیز وجود دارد.

در اصل ، ما از مثال بیان شده استفاده می کنیم و آن را به جریان Groupby اضافه می کنیم:

updateItem$
  .pipe(
    groupBy((updateItem) => updateItem.id), // create a group for each unique id
    mergeMap((group$) => {
      console.log('group$', group$.key);
      return group$.pipe(
        switchMap((updateItem) =>
          statedStream(updateApiCall$(updateItem), updateItem)
        )
      );
    })
  )
  .subscribe((data) => console.log('Received:', data));

سپس ، ما چند به روزرسانی را منتشر می کنیم و در آنجا خواهید فهمید. 2 به روزرسانی به صورت متوالی صادر می شود ، سپس یک بروزرسانی سوم بعد از 5s.

console.log("emit updateItem first time", 'id: 4')
updateItem$.next({
  id: '4',
  name: 'Romain Geffrault 4',
});

console.log("emit updateItem first time", 'id: 5')
updateItem$.next({
  id: '5',
  name: 'Romain Geffrault 5',
});


setTimeout(() => {
  console.log("emit updateItem second time", 'id: 4')
  updateItem$.next({
    id: '4',
    name: 'Romain Geffrault 4, updated twice',
  });
}, 5000)

در اینجا نتیجه است:

با تشکر از اپراتور Groupby ، راه اندازی چندین درخواست API به صورت موازی آسان است.

در اینجا پیوندی برای دیدن این زیبایی در عمل آمده است.

به عنوان مثال ، من توسط ID گروه بندی کردم که یک مورد اساسی است ، اما می توانیم مفهوم گروه بندی را بیشتر تحت فشار قرار دهیم.

لیستی از موجودات با اساسنامه بارگیری واکنشی را در مورد زاویه ای نشان دهید

من عملی خواهم بود و عملی را برای شما ارائه می دهم که نزدیک به یک مورد واقعی است که می توانید به راحتی از آن استفاده کنید.

متأسفانه ، پیوند Stackbitz کار نمی کند ، اما در اینجا تکرار کدی است که می توانید برای امتحان کردن آنها کلون کنید.

من از Nodejs v.20 استفاده کردم

npm i
ng serve

صفحاتی که مورد علاقه ما هستند عبارتند از:
SRC \ APP \ ویژگی ها \ data-list \ data-list.component.ts
& src \ app \ ویژگی ها \ data-list \ data-list.component.html

من نظرات زیادی را اضافه کردم تا به شما توضیح دهم که اگر به آن عادت نکنید ، چگونه عملکردهای RXJS چگونه کار می کنند.

من در اینجا از یک رویکرد اعلانی/واکنشی استفاده کردم. زیرا این روش من برای انجام کارها با این مزایای بسیاری است.

شما متوجه خواهید شد که من این پرونده را مدیریت کرده ام که تماس های API قبل از اشتراک جریان ها به پایان می رسد (مانند آن هیچ حافظه و هیچ مورد عجیب و غریب).

من این مثال را دوست دارم ، اما می فهمم که می توان آن را بیشتر بهبود بخشید.

به عنوان مثال ، من باید چندین بار انواع داده های TS را تکرار کنم.
حتی اگر اضافه کردن خیلی پیچیده نباشد ، من این پرونده را مدیریت نکردم تا نمایش لیست موجود را در حین ناوبری حفظ کنم ، امکان اضافه کردن به راحتی انتخاب کننده ها را نداشتم …

نکته دیگری که می تواند کمی شرم آور باشد این است که با وجود همه چیز این کدها فضا را به خود اختصاص می دهند و کمی به دید کلی این مؤلفه آسیب می رسانند.

یک راه حل ممکن است قطع موارد مختلف در اسکن ، در دفتر باشد که شبیه به کاهش دهنده ها است. اما بازیابی بچه های مناسب ، جایی که میهمانان (استنباط) را تایپ می کنند ، می تواند کمی محدود کننده باشد.

همچنین می توان تصور کرد که ما می خواهیم همان عمل را همزمان در چندین مورد اعمال کنیم (BulkEdit …).

من تمام این کاستی ها و بسیاری دیگر را در نظر گرفتم ، من در حال ایجاد یک ابزار آزمایشی کوچک برای لحظه ای هستم که به من امکان می دهد این مکانیسم ها را به روشی اعلامی پیاده سازی کنم.

همانطور که TanstackQuery می تواند به یک ابزار مدیریت دولت سرور نزدیک باشد. هنوز هم نیاز به تأمل دارد ، اما من نمی توانم صبر کنم تا نتیجه را برای شما ارائه دهم.

اگر سوالی دارید ، دریغ نکنید ، یا اگر می خواهید در مورد آن بحث کنید ، از اظهار نظر دریغ نکنید ، من خوشحال می شوم که به بهترین شکل ممکن به شما پاسخ دهم.

PS: من از سیگنال استفاده نکردم ، زیرا:

1. من از این نوع الگوی در برنامه استفاده می کنم که هنوز در نسخه های آخر زاویه ای نیست.
2. در صورت لزوم فقط یک tosignal درست کنید
3. به خصوص از آنجا که ماشه به روزرسانی ها/حذف ها رویدادها هستند و نه کشورهایی که مشاهده می کند کاملاً مدیریت می کند ، اما سیگنال نیست.