Diskussionsthread zur Schulung

[JohannesHoppe]

Herzlich Willkommen! 🎉 Hier können wir während der Schulung Links und Codeschnipsel teilen.

[JohannesHoppe]

Automatische Migration

ng g @angular/core:control-flow

[JohannesHoppe]

import { provideExperimentalZonelessChangeDetection } from '@angular/core';

// app.config.ts
// Vorsicht: nicht sofort produktiv nehmen
provideExperimentalZonelessChangeDetection()

[JohannesHoppe]

// book-store.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { Observable } from 'rxjs';
import { Book } from './book';

@Injectable({
  providedIn: 'root'
})
export class BookStoreService {

  http = inject(HttpClient);

  getAllBooks(): Observable<Book[]> {
    return this.http.get<Book[]>('https://api.angular.schule/books');
  }

  getSingleBook(isbn: string): Observable<Book> {
    return this.http.get<Book>('https://api.angular.schule/books/' + isbn /* + '/slow' */);
  }
}

[JohannesHoppe]

"test": {
     "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],

import { Book } from './book';
import { BookRatingService } from './book-rating.service';

describe('BookRatingService', () => {
  let service: BookRatingService;
  let book: Book;

  // Arrange
  beforeEach(() => {
    service = new BookRatingService();
    book = {
      isbn: '000',
      title: 'Test',
      description: 'Test',
      rating: 3,
      price: 99
    };
  });

  it('should rate up a book by one', () => {

    // Act
    const ratedBook = service.rateUp(book);

    // Assert
    expect(ratedBook.rating).toBe(4);
  });

  it('should rate down a book by one', () => {
    const ratedBook = service.rateDown(book);
    expect(ratedBook.rating).toBe(2);
  });

  it('should not be allowed to have a rating greater than 5', () => {
    book.rating = 5;
    const ratedBook = service.rateUp(book);
    expect(ratedBook.rating).toBe(5);
  });

  it('should not be allowed to have a rating smaller than 1', () => {
    book.rating = 1;
    const ratedBook = service.rateDown(book);
    expect(ratedBook.rating).toBe(1);
  });

  it('should not mutate the book', () => {
    const frozenBook = Object.freeze(book);
    expect(() => service.rateUp(frozenBook)).not.toThrow();
    expect(() => service.rateDown(frozenBook)).not.toThrow();
  })
});

[JohannesHoppe]

Viel Drama auf Tech Twitter: microsoft/playwright#27783

[JohannesHoppe]

Jasmine Spione: https://github.com/angular-schule/2023-09-angular-workshop-hannover/blob/main/book-rating/src/app/books/dashboard/dashboard.component.spec.ts

[r3zafa]

playwright API testing: https://playwright.dev/docs/api-testing

example

working-with-api.spec.ts

import {APIResponse, expect, test} from '@playwright/test';
import {appUrl, deleteArticleApiBaseUrl, postArticleApiUrl} from "./@constants";
import {ArticleResponseInterface, ArticlesResponseInterface} from "./@interfaces/articles-response.interface";
import tags from './@mock-data/tags.json';
import article from './@mock-data/article-post.json';

// 1. using api - mocking API/Modify API Response/Perform API Request.
test.describe('using api - intercept and change get response with mock data', () => {

    test.beforeEach(async ({page}) => {
        // exact _path_: https://conduit-api.bondaracademy.com/api/tags can be used for route
        // _OR_ relative _path_ as following can be used to edit/modify the response to call.
        await page.route('*/**/api/tags', async route => {
            await route.fulfill({
                body: JSON.stringify(tags)
            })
        });

        await page.goto(appUrl)
    })


    test('load the web-app to see the result', async ({page}) => {
        await expect(page.locator('.navbar-brand')).toHaveText('conduit');

        await page.waitForTimeout(10000);// 10s wait for headed test
    });
})

// 2. using api - mocking API/Modify API Response/Perform API Request.
test.describe('using api - intercept and modify get response with mock data', () => {

    test.beforeEach(async ({page}) => {
        // https://conduit-api.bondaracademy.com/api/articles?limit=10&offset=0
        await page.route('*/**/api/articles*', async route => {
            // fetch data
            const apiResponse: APIResponse = await route.fetch();
            // modify data
            const responseBody: ArticlesResponseInterface = await apiResponse.json();
            responseBody.articles[0].title = 'intercept and modify get response';
            responseBody.articles[0].description = 'mock description';
            responseBody.articles[0].tagList = ['mock'];
            responseBody.articles[0].author.username = 'r3zafaraji';
            // apply changes
            await route.fulfill({
                body: JSON.stringify(responseBody)
            })
        });

        await page.goto(appUrl)
    })


    test('load the web-app to see the modification as result', async ({page}) => {
        await expect(page.locator('app-article-list h1').first()).toContainText('intercept and modify get response');
        await expect(page.locator('app-article-list p').first()).toContainText('mock description');
        await expect(page.locator('app-article-list .author').first()).toContainText('r3zafaraji');
        await expect(page.locator('app-article-list .tag-list li').first()).toContainText('mock');

        await page.waitForTimeout(10000);// 10s wait for headed test
    });
})

// 3. using api - mocking API/Modify API Response/Perform API Request.
test.describe('using api - post an article using api and delete it using ui', () => {

    test.beforeEach(async ({page}) => {
        await page.goto(appUrl)
    })

    test('post an article with api and delete it using ui', async ({page, request}) => {

        const articleResponse = await request.post(postArticleApiUrl, {data: article});

        expect(articleResponse.status()).toEqual(201);

        await page.getByText('Global Feed').click();
        await page.waitForTimeout(3000)
        await page.getByText('intercept and change/pass mock data to response').click();
        await page.waitForTimeout(3000)
        await page.getByRole('button', {name: 'Delete Article'}).first().click();
        await page.getByText('Global Feed').click();
        // verify that article is deleted
        await expect(page.locator('app-article-list h1').first()).not.toContainText('test post');

        await page.waitForTimeout(5000)

    });

});

// 4. using api – Intercept Browser API Response.
test.describe('Intercept Browser API Response', () => {

    test.beforeEach(async ({page}) => {
        await page.goto(appUrl)
    })

    test('Intercept Browser API Response.', async ({page, request}) => {
        await page.waitForTimeout(500);
        await page.getByText('New Article').click();
        await page.waitForTimeout(500);
        await page.getByRole('textbox', {name: 'Article Title'}).fill('awesome api test');
        await page.getByRole('textbox', {name: "What's this article about?"}).fill('api test');
        await page.getByRole('textbox', {name: "Write your article (in markdown)"}).fill('playwright api test is awesome');
        await page.getByRole('textbox', {name: "Enter tags"}).fill('test playwright api');
        await page.getByRole('button', {name: "Publish Article"}).click();
        // intercept api response.
        const articleResponse = await page.waitForResponse(postArticleApiUrl);
        const articleResponseBody: ArticleResponseInterface = await articleResponse.json();
        const slugId: string = articleResponseBody.article.slug;
        //
        await page.waitForTimeout(500);
        await expect(page.locator('.article-page h1')).toContainText('awesome api test');
        await page.waitForTimeout(500);
        await page.getByText('Home').click();
        await expect(page.locator('app-article-list h1').first()).toContainText('awesome api test');
        // delete with slugId
        const deleteArticleResponse = await request.delete(deleteArticleApiBaseUrl + slugId);
        expect(deleteArticleResponse.status()).toEqual(204);
        await page.waitForTimeout(5000);
    });

});



/* npm scripts and cli commands */
// The next step includes generating scripts inside package.json to run deferred tests in commandline.
// An example is available in this project package.json file.

[r3zafa]

auth.setup.ts

import {APIResponse, test as setup} from '@playwright/test';
import fs from 'fs';
import {loginApiUrl} from "./@constants";
import user from '../.auth/user.json';

// 5. sharing Authentication state
// 5.1.1. Create .auth folder in project route
// 5.1.2. Define authFile.
const authFile = '.auth/user.json';
// 5.1.3. Config playwright.config.ts
// 5.2. Create the setup method.
setup('authentication', async ({page, request}) => {

    /* authentication using UI */
    // await page.goto(appUrl);
    // await page.getByText('Sign in').click();
    // await page.getByRole('textbox', {name: 'Email'}).fill('[email protected]');
    // await page.getByRole('textbox', {name: 'Password'}).fill('1234567890');
    // await page.getByRole('button').click();

    /*waiting for response and saving it to storage*/
    // await page.waitForResponse(getTagsApiUrl)
    // await page.context().storageState({path: authFile})

    /* authentication using API – best practice */
    const loginResponse: APIResponse = await request.post(loginApiUrl, {
        data: {"user": {"email": "xxx", "password": "xxx"}}
    });
    const responseBody = await loginResponse.json();
    const accessToken = responseBody.user.token
    user.origins[0].localStorage[0].value = accessToken;
    fs.writeFileSync(authFile, JSON.stringify(user));

    process.env['ACCESS_TOKEN'] = accessToken;
})
// 5.3. Remove the authentication from tests in working-with-api.spec.ts file

[JohannesHoppe]

Hausaufgabe (bis Montag)

Das Buch wurde client-seitig geupdated. Sende die Information zum Server.

a) du bist fertig
b) Lade die Liste neu (optional) --- Hinweis: KEIN subscribe im subscribe. Trotzdem aufeinander warten.

[GrigoriyKostyuk]

dashboard.component.ts

  doRateUp(book: Book) {
    console.log("up")
    this.rs.rateUp$(book)
      .pipe(
        takeUntil(this.destroy),
        tap(this.updateAndSortList$)
      ).subscribe();
  }

  doRateDown(book: Book) {
    console.log("down")
    this.rs.rateDown$(book).pipe(
      takeUntil(this.destroy),
      tap(this.updateAndSortList$),
    ).subscribe();
  }

  updateAndSortList$ = (ratedBook: Book) =>
    this.books.update(value => value
      .map(b => b.isbn === ratedBook.isbn ? ratedBook : b)
      .sort((a, b) => b.rating - a.rating));

book-rating.service.ts

  rateUp$(book: Book): Observable<Book> {
    const bookRated = this.rateUp(book);
    // http Aufruf
    return of(bookRated).pipe( 
      delay(2000)

    );
  }

  rateDown$(book: Book): Observable<Book> {
    const bookRated = this.rateDown(book);
    // http Aufruf
    return of(bookRated).pipe( 
      delay(2000)
    );
  }

[JohannesHoppe]

Signals for Reactive and Template-based Forms (Open!)

angular/angular#53485

[JohannesHoppe]

ng g c books/book-form --dry-run

[JohannesHoppe]

import { Component, output } from '@angular/core';
import { Book } from '../shared/book';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-book-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './book-form.component.html',
  styleUrl: './book-form.component.scss'
})
export class BookFormComponent {

  create = output<Book>();

  bookForm = new FormGroup({

    isbn: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required, Validators.minLength(3)]
    }),

    title: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required]
    }),

    description: new FormControl('', {
      nonNullable: true
    })
  });

  c = this.bookForm.controls;

  isInvalid(control: FormControl): boolean {
    return control.invalid && control.touched
  }

  submitForm() {

    const newBook: Book = {
      ...this.bookForm.getRawValue(),
      rating: 1,
      price: 1
    }

    this.create.emit(newBook);
    this.bookForm.reset();
  }
}

<form [formGroup]="bookForm" (ngSubmit)="submitForm()">

  <div class="form-group">
    <label for="isbn">ISBN</label>
    <input [formControl]="c.isbn" type="text" class="form-control" id="isbn">
    @if (isInvalid(c.isbn)) {
      <div class="feedback-error">Die ISBN ist ungültig!</div>
    }
  </div>

  <div class="form-group">
    <label for="title">Titel</label>
    <input [formControl]="c.title" type="text" class="form-control" id="title">
  </div>

  <div class="form-group">
    <label for="description">Beschreibung</label>
    <textarea [formControl]="c.description" class="form-control" id="description"></textarea>
  </div>

  <button [disabled]="bookForm.invalid" type="submit" class="btn btn-primary mb-4">Erstellen</button>

</form>

[JohannesHoppe]

// book-form-component.ts

import { ChangeDetectionStrategy, Component, input, output, effect } from '@angular/core';
import { Book } from '../shared/book';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-book-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './book-form.component.html',
  styleUrl: './book-form.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BookFormComponent {

  create = output<Book>();
  edit = output<Book>();

  // createOrEdit = output<{
  //   type: 'edit' | 'create',
  //   book: Book
  // }>()

  currentBook = input<Book | undefined>();

  updateForm = effect(() => {
    // console.log('Current Book', this.currentBook());
    const currentBook = this.currentBook();
    const isbnControl = this.bookForm.controls.isbn;

    if (currentBook) {
      this.bookForm.patchValue(currentBook);
      isbnControl.disable();
    } else {
      isbnControl.enable();
    }
  });


  bookForm = new FormGroup({

    isbn: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required, Validators.minLength(3)]
    }),

    title: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required]
    }),

    description: new FormControl('', {
      nonNullable: true
    })
  });

  isInvalid(control: FormControl): boolean {
    return control.invalid && control.touched
  }

  submitForm() {

    const currentBook = this.currentBook();
    if (currentBook) {

      const { rating, price } = currentBook;
      const changedBook: Book = {
        ...this.bookForm.getRawValue(),
        rating,
        price
      }
      this.edit.emit(changedBook);

    } else {

      const newBook: Book = {
        ...this.bookForm.getRawValue(),
        rating: 1,
        price: 1
      }
      this.create.emit(newBook);

    }
    this.bookForm.reset();
  }
}

<!--  book-form-component.ts --> 
import { ChangeDetectionStrategy, Component, input, output, effect } from '@angular/core';
import { Book } from '../shared/book';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-book-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './book-form.component.html',
  styleUrl: './book-form.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BookFormComponent {

  create = output<Book>();
  edit = output<Book>();

  currentBook = input<Book | undefined>();

  updateForm = effect(() => {
    // console.log('Current Book', this.currentBook());
    const currentBook = this.currentBook();
    const isbnControl = this.bookForm.controls.isbn;

    if (currentBook) {
      this.bookForm.patchValue(currentBook);
      isbnControl.disable();
    } else {
      isbnControl.enable();
    }
  });


  bookForm = new FormGroup({

    isbn: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required, Validators.minLength(3)]
    }),

    title: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required]
    }),

    description: new FormControl('', {
      nonNullable: true
    })
  });

  isInvalid(control: FormControl): boolean {
    return control.invalid && control.touched
  }

  submitForm() {

    const currentBook = this.currentBook();
    if (currentBook) {

      const { rating, price } = currentBook;
      const changedBook: Book = {
        ...this.bookForm.getRawValue(),
        rating,
        price
      }
      this.edit.emit(changedBook);

    } else {

      const newBook: Book = {
        ...this.bookForm.getRawValue(),
        rating: 1,
        price: 1
      }
      this.create.emit(newBook);

    }
    this.bookForm.reset();
  }
}

[JohannesHoppe]

// dashboard.component.ts

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

import { BookComponent } from '../book/book.component';
import { Book } from '../shared/book';
import { BookRatingService } from '../shared/book-rating.service';
import { BookStoreService } from '../shared/book-store.service';
import { toSignal } from '@angular/core/rxjs-interop';
import { BookFormComponent } from '../book-form/book-form.component';

@Component({
    selector: 'app-dashboard',
    standalone: true,
    templateUrl: './dashboard.component.html',
    styleUrl: './dashboard.component.scss',
    imports: [BookComponent, BookFormComponent],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent {

  rs = inject(BookRatingService);
  bs = inject(BookStoreService);

  //books = toSignal(this.bs.getAllBooks(), { initialValue: [] });
  books = signal<Book[]>([]);

  currentBook = signal<Book | undefined>(undefined);

  constructor() {
    this.bs.getAllBooks().subscribe(books => this.books.set(books))
  }

  zeigeEinBuchAn() {
    alert(this.books()[0]?.title);
  }

  doRateUp(book: Book) {
    const ratedBook = this.rs.rateUp(book);
    this.updateAndSortList(ratedBook);
  }

  doRateDown(book: Book) {
    const ratedBook = this.rs.rateDown(book);
    this.updateAndSortList(ratedBook);
  }

  updateAndSortList(changedBook: Book) {
    this.books.update(books => books
      .map(b => b.isbn === changedBook.isbn ? changedBook : b)
      .sort((a, b) => b.rating - a.rating));

    // TODO: Buch zum Server senden (Hausaufgabe)
  }

  addBook(book: Book) {
    this.books.update(books => [...books, book]);
  }

  changeToEditMode(book: Book) {
    this.currentBook.set(book)
  }

  changeBook(changedBook: Book) {
    this.updateAndSortList(changedBook);
    this.currentBook.set(undefined);
  }
}

<!-- dashboard.component.html -->
<app-book-form
  (create)="addBook($event)"
  (edit)="changeBook($event)"
  [currentBook]="currentBook()"
/>

@for (book of books(); track book) {
  <app-book
    (rateUp)="doRateUp($event)"
    (rateDown)="doRateDown($event)"
    [book]="book"
    (edit)="changeToEditMode($event)"
  />

} @empty {
  Keine Bücher vorhanden
}

<button (click)="zeigeEinBuchAn()">Zeige 0. Buch an</button>

<p>
  <strong>Anzahl Bücher:</strong> {{ books().length }}
</p>

[JohannesHoppe]

ng add @ngrx/store
ng add @ngrx/effects
ng add @ngrx/store-devtools
ng add @ngrx/schematics
ng g feature books/store/book --entity=false --api --defaults

[JohannesHoppe]

// book.reducer.ts
import { createFeature, createReducer, on } from '@ngrx/store';
import { BookActions } from './book.actions';
import { Book } from '../shared/book';

export const bookFeatureKey = 'book';

export interface State {
  books: Book[],
  loading: boolean
}

export const initialState: State = {
  books: [],
  loading: false
};

export const reducer = createReducer(
  initialState,

  on(BookActions.loadBooks, state => ({
    ...state,
    loading: true
  })),

  on(BookActions.loadBooksSuccess, (state, { books }) => ({
    ... state,
    loading: false,
    books
  })),

  on(BookActions.loadBooksFailure, state => ({
    ...state,
    loading: false,
    books: []
  }))
);

export const bookFeature = createFeature({
  name: bookFeatureKey,
  reducer,
});

[JohannesHoppe]

Hands On (Gruppenarbeit)

• Implementiere folgende Actions + Reducer: rateUp und rateDown
• Nur client-seitig (keine HTTP Calls für diese Aufgabe notwendig)

[JohannesHoppe]

Im Portal findet ihr neue Slides & Handouts!

[JohannesHoppe]

1

// book-rating.service.spec.ts

import { Book } from './book';
import { BookRatingService } from './book-rating.service';

describe('BookRatingService', () => {
  let book: Book;

  // Arrange
  beforeEach(() => {
    book = {
      isbn: '000',
      title: 'Test',
      description: 'Test',
      rating: 3,
      price: 99
    };
  });

  it('should rate up a book by one', () => {

    // Act
    const ratedBook = BookRatingService.rateUp(book);

    // Assert
    expect(ratedBook.rating).toBe(4);
  });

  it('should rate down a book by one', () => {
    const ratedBook = BookRatingService.rateDown(book);
    expect(ratedBook.rating).toBe(2);
  });

  it('should not be allowed to have a rating greater than 5', () => {
    book.rating = 5;
    const ratedBook = BookRatingService.rateUp(book);
    expect(ratedBook.rating).toBe(5);
  });

  it('should not be allowed to have a rating smaller than 1', () => {
    book.rating = 1;
    const ratedBook = BookRatingService.rateDown(book);
    expect(ratedBook.rating).toBe(1);
  });

  it('should not mutate the book', () => {
    const frozenBook = Object.freeze(book);
    expect(() => BookRatingService.rateUp(frozenBook)).not.toThrow();
    expect(() => BookRatingService.rateDown(frozenBook)).not.toThrow();
  })
});

[JohannesHoppe]

2

// book.selectors.spec.ts

import * as fromBook from './book.reducer';
import { selectBookState } from './book.selectors';

describe('Book Selectors', () => {
  it('should select the feature state', () => {
    const result = selectBookState({
      [fromBook.bookFeatureKey]: {}
    });

    // expect(result).toEqual({});  // diese Zeile auskommentieren
  });
});

[JohannesHoppe]

3

Alle Tests für DashboardComponent löschen/umbennen! (dashboard.component.spec.ts)

[JohannesHoppe]

4

app.component.spec.ts

import { provideMockStore } from '@ngrx/store/testing';
import { initialState } from './books/store/book.reducer';


    await TestBed.configureTestingModule({
      imports: [
        AppComponent
      ],
      providers: [
        provideMockStore({ initialState })  // NEU
      ]

[JohannesHoppe]

5

book.effects.spec.ts

import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';

    TestBed.configureTestingModule({
      providers: [
        BookEffects,
        provideMockActions(() => actions$),

        provideHttpClient(),  // NEU
        provideHttpClientTesting()  // NEU
      ]
    });

[JohannesHoppe]

import { Book } from '../shared/book';
import { BookActions } from './book.actions';
import { reducer, initialState } from './book.reducer';

describe('Book Reducer', () => {

  it('should set loading flag to `true` on loadBooks action', () => {
    const action =  BookActions.loadBooks();
    const newState = reducer(initialState, action);
    expect(newState.loading).toBeTrue();
  });

  it('should set books on loadBooksSuccess action', () => {

    const newBooks: Book[] = [];
    const action = BookActions.loadBooksSuccess({ books: newBooks });

    const oldState = {
      books: [],
      loading: true
    };

    // ODER
    // const oldState = reducer(initialState, BookActions.loadBooks());

    const newState = reducer(oldState, action);

    expect(newState.loading).toBeFalse();
    expect(newState.books).toBe(newBooks);
  });

  // Hands On (Gruppenarbeit):

  // 1. Teste den Reducer, der auf die create-Action reagiert
  // 2. Teste den Reducer, der auf die rateUp-Action reagiert

});

[r3zafa]

book.reducer.spec.ts

    // handsOn
    // 1.teste den reducer, der auf die create action reagiert
    it('should add a new book to books', () => {
      const oldBookList: Book[] = [];
      const newBook:Book = {
        isbn: '098203',
        title:'test leicht gemacht',
        description:'-',
        price: 12,
        rating:3
      };
      const action = BookActions.create({ book: newBook });
      const oldState = { books: oldBookList, loading: false };
      const newState = reducer(oldState, action);
      // tests
      expect(newState.loading).toBeFalse();
      expect(oldState.books.length).toBeLessThan(newState.books.length);
    });
    // 2 "...." ratingUp reagiert
    it('should rateUp a book', () => {
      const testBook:Book = {
        isbn: '098203',
        title:'test leicht gemacht',
        description:'-',
        price: 12,
        rating:3
      };
      const testBookList: Book[] = [testBook];
      //
      const action = BookActions.rateUp({ book: testBook });
      // state
      const oldState = { books: testBookList, loading: false };
      const newState = reducer(oldState, action);
      // tests
      expect(newState.loading).toBeFalse();
      expect(newState.books[0].rating).toBe(4);
    });

[JohannesHoppe]

🎮 NEU: RxJS Playground

Du kannst dir entweder

• den Code als ZIP-Datei herunterladen: rxjs-playground.zip
  oder
  
• dieses Repository per Git herunterladen und in den Ordner rxjs-playground wechseln.

cd rxjs-playground
npm install
ng serve

Öffne den Browser unter der URL http://localhost:4300 (!), um die Anwendung zu sehen.
Die Übungen befinden sich im Ordner rxjs-playground/src/app/exercises/.

[JohannesHoppe]

Wie versprochen, zeige ich euch hier zwei Möglichkeiten, um in einem Effekt auf die Werte des Stores zugreifen zu können!

1. mit withLatestFrom

Hinweis: Eine "selector factory" kann man hier nicht einsetzen. Statt dessen suchen wir nach dem Buch direkt im Effect.

  updateBook$ = createEffect(() => {
    return inject(Actions).pipe(

      ofType(BookActions.rateUp, BookActions.rateDown),
      withLatestFrom(this.store.select(selectBooks)),
      map(([{ book }, books]) => books.find(b => b.isbn === book.isbn)),
      mergeMap(bookFromStore =>

        this.bs.updateBook(bookFromStore!).pipe(
          map(book => BookActions.updateSuccess({ book })),
          catchError(error => of(BookActions.createBooksFailure({ error }))))
      )
    );
  });

2. mit "factory selectors"

Hinweis: Wir setzen eine "selector factory" ein (getBookByIsbn) und subscriben direkt auf den Selector

  updateBook$ = createEffect(() => {
    return inject(Actions).pipe(

      ofType(BookActions.rateUp, BookActions.rateDown),
      mergeMap(({ book }) =>
        this.store.select(getBookByIsbn(book.isbn)).pipe(

          mergeMap(bookFromStore =>

            this.bs.updateBook(bookFromStore!).pipe(
              map(book => BookActions.updateSuccess({ book })),
              catchError(error => of(BookActions.updateFailure({ error }))))
          )
        )
      )
    );
  });
  
  // selector factory:
 
  export function getBookByIsbn(isbn: string) {
  return createSelector(
    selectBooks,
    state => state.find(b => b.isbn === isbn)
  );
}

[JohannesHoppe]

Everything you need to know about the resource API

https://push-based.io/article/everything-you-need-to-know-about-the-resource-api

[JohannesHoppe]

https://github.com/angular-schule/2023-09-angular-workshop-hannover/blob/main/book-rating/src/app/books/book-details/book-details.component.ts

bs = inject(BookStoreService);

  book$ = inject(ActivatedRoute).paramMap.pipe(
    map(paramMap => paramMap.get('isbn')!),
    switchMap(isbn => this.bs.getSingleBook(isbn).pipe(
      retry({
        count: 3,
        delay: 1000
      }),
      // catchError((e: HttpErrorResponse) => of({
      //   title: 'FEHLER',
      //   description: e.message
      // }))
      catchError((e: HttpErrorResponse) => EMPTY)
    ))
  );

[JohannesHoppe]

Hands On

Bitte einen PR senden für das Drag and drop Beispiel. 🙂

[fmalcher]

📕 Neu im Blog:
Die neue Resource API von Angular
https://angular-buch.com/blog/2024-10-resource-api