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

This video explains how to use injection functions in Angular for repeating initializations, particularly in the context of NGRX state management, providing practical examples and best practices.

בואו ניתן דוגמא פשוטה של שימוש ב 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.