Angular Signals na Effects

Angular imebadilisha jinsi inavyoshughulikia reactivity. Hutaji tena Zone.js ili kugundua kila mabadiliko madogo. Signals huiruhusu Angular kusasisha sehemu mahususi tu za UI zinazobadilika. Hii inafanya programu zako kuwa na kasi zaidi na inaruhusu hali ya zoneless.

Signals ni nini?

Signal ni chombo cha thamani inayobadilika (reactive value). Thamani inapobadilika, Angular inajua hasa ni sehemu gani za template zinazopaswa kusasishwa.

  • signal(): Inatengeneza signal mpya. Tumia .set() kubadilisha thamani au .update() kubadilisha thamani kulingana na ile ya sasa.
  • computed(): Inatengeneza signal isiyoweza kubadilishwa (read-only). Inapata thamani yake kutoka kwa signals nyingine. Angular inaikokotoa hii pale tu unapoisoma na kuhifadhi matokeo (cache).
  • effect(): Inatekeleza kodi wakati signal inapobadilika. Itumie kwa mambo ya pembeni (side effects) kama vile kurekodi (logging) au mabadiliko ya mikono ya DOM.

Lini utumie Signals dhidi ya RxJS

Huhitaji kuchagua moja. Unapaswa kutumia zote mbili kwa kazi tofauti.

Tumia Signals kwa:

  • Kuhifadhi hali ya UI (UI state).
  • Kuendesha uwasilishaji wa template (template rendering).
  • Kuchukua nafasi ya @Input() na @Output().
  • Kufanya kazi katika programu za zoneless.

Tumia RxJS kwa:

  • Kushughulikia mtiririko wa async kama HTTP au WebSockets.
  • Mantiki tata kama debouncing au kubadilisha mtiririko (switching streams).
  • Kuunganisha mfuatano wa matukio mengi.

Unaweza kuzounganisha kwa kutumia rxjs-interop:

  • toSignal(): Inabadilisha Observable kuwa Signal.
  • toObservable(): Inabadilisha Signal kuwa Observable.

API Mpya Bila Decorators

Angular 17+ imeanzisha njia mpya za kushughulikia mtiririko wa data bila kutumia decorators.

  • input(): Signal isiyoweza kubadilishwa kwa ajili ya data inayotoka kwa mzazi (parent).
  • model(): Signal inayoweza kuandikwa kwa ajili ya muunganisho wa pande mbili (two-way binding). Inachukua nafasi ya mfumo wa zamani wa @Input() na @Output().
  • output(): Njia ya kutuma matukio (events) kutoka kwa mtoto (child) kwenda kwa mzazi (parent). Si signal, lakini inarahisisha kodi yako.

Kwa nini hii ni bora kuliko React

Ikiwa unaijua React, dhana ni sawa lakini utekelezaji ni tofauti.

  • Ufuatiliaji wa Otomatiki: Katika React, lazima uorodheshe utegemezi (dependencies) kwenye array. Katika Angular, mfumo unafuatilia ni signals gani unazotumia moja kwa moja. Huwezi kusahau utegemezi.
  • Usasishaji wa Usahihi: React mara nyingi huwasilisha upya (re-render) vipengele vyote (components). Angular signals husasisha tu node mahususi za DOM zinazotegemea thamani hiyo.
  • Hakuna Stale Closures: Signals kila wakati hutoa thamani ya sasa unapozita.

Chanzo: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn