התקנת @ngrx/store

שהו שיעור עבודה עצמית שבו נעשה את הצעדים הבאים:

• יצירת אפליקציה אנגולר חדשה
• התקנת @ngrx/store
• התקנת @ngrx/store-devtools
• התקנת תוסף Redux DevTools בכרום
• מילוי ה - state של ngrx עם נתונים
• בדיקת ה - state באמצעות Redux DevTools

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

יצירת אפליקציה אנגולר חדשה

ניתן ליצור אפליקציה אנגולר חדשה באמצעות Angular CLI.

npx @angular/cli@latest new ngrx-store-install --minimal --style css --routing false

הפקודה תיצור אפליקציה אנגולר חדשה, ה - flag --minimal תיצור אפליקציה מינימלית עם מינימום קבצים (--inline-template, --skip-tests, --inline-style).
בנוסף בחרנו ליצור את האפליקציה עם סגנון css וללא routing.

OnPush

באפליקציות אנגולר עם NGRX תקבלו את הנתונים כ - Observable שמאפשר לאפליקציות אנגולר עם NGRX להיות אידיאליות לאסטרטגיית OnPush (בכל הרכיבים).
בקובץ app.component.ts נשנה את ה - changeDetection ל - OnPush.

src/app/app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {}

עצה

מומלץ להשתמש ב - OnPush בכל הרכיבים באפליקציה, לא רק ברכיב הראשי.
ניתן לקרוא על זה ב - עצה טובה זו ולהוסיף כלל lint לוודא שכל הרכיבים באפליקציה מוגדרים עם OnPush.

התקנת @ngrx/store

כל אחת מספריות @ngrx/* יש להן פקודת ng add שתתקין את הספרייה ותוסיף קוד תבנית נוסף.

הריצו את הפקודה הבאה באפליקציה האנגולר שיצרתם:

npx ng add @ngrx/store@latest --skip-confirmation

הרצת הפקודה תתקין את @ngrx/store ותוסיף את השינוי הבא לקובץ src/app/app.module.ts:

src/app/app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
 import {StoreModule} from '@ngrx/store';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
    BrowserModule,
    StoreModule.forRoot({}, {})
  ],
  providers: [],
  bootstrap: [AppComponent],
})

שימו לב שהוספנו את NGRX StoreModule.forRoot({}, {}) למערך imports עם אובייקטים ריקים, שמשמע שיהיה לנו State ריק ב - NGRX.

התקנת @ngrx/store-devtools

מומלץ לעבוד עם @ngrx/store-devtools באפליקציות Angular+NGRX שתאפשר לכם לבדוק את State של האפליקציה שלכם.

npx ng add @ngrx/store-devtools@latest --skip-confirmation

הרצת הפקודה תתקין את @ngrx/store-devtools ותוסיף את השינוי הבא לקובץ src/app/app.module.ts:

src/app/app.module.ts

import {NgModule} from '@angular/core';
import {NgModule, isDevMode} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [BrowserModule, StoreModule.forRoot({}, {})],
  imports: [
    BrowserModule,
    StoreModule.forRoot({}, {}),
    StoreDevtoolsModule.instrument({maxAge: 25, logOnly: !isDevMode()})
  ],
  providers: [],
  bootstrap: [AppComponent],
})

שימו לב שהוספנו את StoreDevtoolsModule.instrument() למערך imports.

עצה

בסביבת production כדאי לא להוסיף את StoreDevtoolsModule למערך imports, בעצם כדאי להסיר לחלוטין את @ngrx/store-devtools מהבאנדל.
ניתן לקרוא על זה ב - עצה טובה זו

התקנת Redux DevTools בכרום

כדי לבדוק את ה - state של האפליקציה שלכם תצטרכו להתקין את התוסף Redux DevTools בכרום.
לחצו על קישור זה והתקינו את התוסף בדפדפן שלכם.

בחינת ה - state באמצעות Redux dev tools

נמלא את ה - state שלנו עם נתונים ראשוניים, ונבדוק שאנו יכולים לבחון את הנתונים באמצעות Redux dev tools.

src/app/app.module.ts

import {NgModule, isDevMode} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot(
      {
        counter: () => 0,
      },
      {}
    ),
    StoreDevtoolsModule.instrument({maxAge: 25, logOnly: !isDevMode()}),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

שמנו בתוך ה - state שלנו את המידע counter: 0 (זה לא חשוב הדיוק בתחביר, נלמד על reducers מאוחר יותר).

בדיקת ה - state

הריצו את האפליקציה:

npx ng serve

פתחו את ה- Developer Tools של הדפדפן ותראו טאב חדש בשם Redux, כפתור זה התווסף לאחר התקנת התוסף Redux DevTools וניתן להשתמש בו כדי לבדוק את ה - state.

סיכום

האפליקציה שיצרנו תהווה את הבסיס לכל התרגילים שתעשו בפרק ה - NGRX.
באפליקציה זו יש @ngrx/store וגם @ngrx/store-devtools מותקנים.
בנוסף יש תוסף Redux DevTools בכרום שמאפשר לבדוק את ה - state של האפליקציה שלכם.