Injection Functions לאתחולים חוזרים

בואו ניתן דוגמא פשוטה של שימוש ב Injection Functions, ומהם נבין טיפ כללי לשימוש ב Injection Functions.

DI

בדרך כלל אנו משתמשים ב- DI על ידי הזרקת השירותים באמצעות constructor.

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';

@Component({...})
export class AppComponent {
  counter$ = this._store.select((state) => state.counter);

  constructor(private _store: Store) {}
}

בדוגמא זו אנו מזריקים את ה- Store באמצעות ה- constructor, ואז משתמשים בשירות Store כדי לבחור נתונים מה- State.

בעיה

מה קורה אם נרצה לקרוא ל- counter ברבים מה Components, מה קורה אם נרצה לבצע פעולות חוזרות על אותם הנתונים?
האם עלינו לשכפל את הלוגיקה בכל ה Components?

נכון שניתן להשתמש ב-NGRX Selectors וב- RXJS pipe כדי ליצור אופרטור RXJS מותאם אישית לחילוץ הנתונים, אך עדיין עלינו להזריק את שירות ה- Store ולקרוא ל- store.pipe.

באופן כללי עם NGRX יש לנו הרבה מאוד מקרים שבהם נצטרך אתחולים שנרשמים לחלק מה - state.

Injection Functions

כאשר יש לך אתחולים חוזרים זה סימן טוב לשימוש ב- injection functions.
דרך נוספת שבה ניתן לבקש מה- DI לתת לך את השירות Store היא באמצעות הפונקציה inject:

import { Component, inject } from '@angular/core';
import { Store } from '@ngrx/store';

@Component({...})
export class AppComponent {
  private _store: Store;
  counter$ = this._store.select((state) => state.counter);

  constructor() {
    this._store = inject(Store);
  }
}

למעשה ניתן לקרוא לפונקציית ההזרקה מתוך הקונטקסט של ההזרקה שכולל את המאפיינים של המחלקה כמו counter$.

עם injection function אותו הקוד יכול להפוך ל:

counter.selector.tsapp.component.ts

import { Component, ChangeDetectionStrategy } from "@angular/core";
import { useCounter } from './counter.selector';


@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-root",
template: `<h1>{{ counter$ | async }}</h1>`
})
export class AppComponent {
counter$ = useCounter();	
}

Read-only

Open Sandbox

הקוד לא רק קצר, פשוט ונקי, אלא גם עושה את הרכיב שלך קל יותר לבדיקה ולהרחבה.
ניתן להוסיף לוגיקה נוספת ל useCounter אם נרצה לשנות את הנתונים בדרך מסוימת, וכן ניתן להשתמש בטכניקה זו אם נרצה לאתחל שאילתת שרת לרכיב.

סיכום

לסיכום אם יש לך אתחולים חוזרים במחלקה שלך כמו:

• קריאות לשרת
• קריאות לשירות
• קריאות לנתונים מ- ngrx או ממקום אחר

במקום לשכפל את הלוגיקה ולהזריק את השירות ב constructor, ניתן להשתמש ב- injection functions ולהזריק את השירות באמצעות הפונקציה inject.