Как сделать реактивные данные в сервисе Angular?

Question

[HellYeahOmg]

Сервис содержит массив с книгами и книгу, которую нужно отредактировать. При изменении (добавлении) книги для редактирования в сервисе нужно чтобы изменение получал и компонент, в который "внедряется" сервис.
На данный момент мой код не работает, хотя есть другой компонент, который аналогично в конструкторе вызывает getBooks и сохраняет локально, там данные обновляются при каждом изменении массива в сервисе.
Обязательно ли здесь использование rxjs?

Сервис

import { Injectable } from "@angular/core";
import { Book } from "../models/book/book";

@Injectable({
  providedIn: "root"
})
export class BooksService {
  private books: Book[];

  private editingBook: Book; // book that needs to edit

  constructor() {
    this.books = JSON.parse(localStorage.getItem("books")) || [];
  }

  getBooks(): Book[] {
    return this.books;
  }

  getEditingBook(): Book {
    return this.editingBook;
  }

  addBook(book: Book): void {
    this.books.push(book);
    this.saveChanges();
  }

  deleteBook(book: Book): void {
    const index = this.books.findIndex(item => item.author === book.author);
    this.books.splice(index, 1);
    this.saveChanges();
  }

  editBook(book: Book): void {
    this.editingBook = book;
  }

  private saveChanges(): void {
    localStorage.setItem("books", JSON.stringify(this.books));
  }
}

Компонент

import { Component } from "@angular/core";
import { Book } from "src/app/models/book/book";
import { BooksService } from "src/app/services/books.service";

@Component({
  selector: "app-form",
  templateUrl: "./form.component.html",
  styleUrls: ["./form.component.sass"]
})
export class FormComponent {
  newBook: Book = {
    author: "",
    title: "",
    year: 0,
    pages: 0
  };

  editingBook: Book;

  constructor(private src: BooksService) {
    this.editingBook = this.src.getEditingBook(); // не обновляется
  }

  handleNewBook(): void {
    this.src.addBook(this.newBook);
    this.resetNewBook();
  }

  private resetNewBook(): void {
    this.newBook = {
      author: "",
      title: "",
      year: 0,
      pages: 0
    };
  }
}

Answer 1

[Антон Швец]

Смотрите, чтобы данные визуально отобразились, нужно чтобы сработала детекция изменений в этом компоненте.
В случае использования rxjs, вызов подписок инициирует обнаружение изменений (ну на самом деле немного сложнее, но и так норм), а вот если вы просто объект поменяете, то нет. Придется как-то отслеживать эти вещи вручную.

хотя есть другой компонент, который аналогично в конструкторе вызывает getBooks и сохраняет локально, там данные обновляются при каждом изменении массива в сервисе

Скорее всего в этом компоненте есть какое-то взаимодействие с пользователем, генерация событий.

Обязательно ли здесь использование rxjs?

Можно ли работать с Ангуляром, но не использовать rxjs? Можно. К примеру дергать какое-нибудь событие, а компонент будет его слушать и выполнять detectChanges. Можно mobx к этому делу приспособить, например. Можно приделать каких-нибудь костылей наподобие vuex, т.е. сделать сеттеры, которые обновляют компонент. Или эффект в redux.
Нужно ли работать с Ангуляром, но не использовать rxjs? Безусловно нет. В сервисе данные храните как поток (сабджекты и их производных) или shareReplay, или исползуйте какие-то надстройки, типа ngrx и прочих.

Rxjs тесно связан с самим Ангуляром и используется практически везде, не знаешь rxjs - не знаешь Ангуляр.

Comments

[HellYeahOmg]

Добавил observable в методы. Метод getEditingBook все равно по подписке не отправляет новый объект при изменении (при вызове editBook).

Сервис

import { Injectable } from "@angular/core";
import { Book } from "../models/book/book";
import { Observable, of } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class BooksService {
  private books: Book[];
  private editingBook: Book; // book that needs to edit

  constructor() {
    this.books = JSON.parse(localStorage.getItem("books")) || [];
  }

  getBooks(): Observable<Book[]> {
    return of(this.books);
  }

  getEditingBook(): Observable<Book> {
    return of(this.editingBook);
  }

  addBook(book: Book): void {
    this.books.push(book);
    this.saveChanges();
  }

  deleteBook(book: Book): void {
    const index = this.books.findIndex(item => item.author === book.author);
    this.books.splice(index, 1);
    this.saveChanges();
  }

  editBook(book: Book): void {
    this.editingBook = book;
  }

  private saveChanges(): void {
    localStorage.setItem("books", JSON.stringify(this.books));
  }
}

Компонент

import { Component, OnInit } from "@angular/core";
import { Book } from "src/app/models/book/book";
import { BooksService } from "src/app/services/books.service";

@Component({
  selector: "app-form",
  templateUrl: "./form.component.html",
  styleUrls: ["./form.component.sass"]
})
export class FormComponent implements OnInit {
  newBook: Book = {
    author: "",
    title: "",
    year: 0,
    pages: 0
  };

  editingBook: Book;

  constructor(private src: BooksService) {}

  ngOnInit() {
    this.getEditingBook();
  }

  getEditingBook(): void {
    this.src.getEditingBook().subscribe(book => {
      this.editingBook = book;
      console.log(book);
    });
  }

  handleNewBook(): void {
    this.src.addBook(this.newBook);
    this.resetNewBook();
  }

  private resetNewBook(): void {
    this.newBook = {
      author: "",
      title: "",
      year: 0,
      pages: 0
    };
  }
}

[Даша Циклаури]

HellYeahOmg, у тебя объект который попадает в of() undefined

[HellYeahOmg]

Даша Циклаури, Дело не в этом. Даже если так:

export class BooksService {
  private books: Book[];
  private editingBook: Book = { author: "", title: "", year: 0, pages: 0 }; // внести какие-то данные
...

[Антон Швец]

HellYeahOmg, ну вы почти не изменили ничего.

import { Injectable } from "@angular/core";
import { Book } from "../models/book/book";
import { Observable, of, BehaviorSubject } from "rxjs";
import { skip } from "rxjs/operators";

@Injectable({
  providedIn: "root"
})
export class BooksService {
  private books$$ = BehaviorSubject<Book[]>([]);
  private editingBook$$ = BehaviorSubject<Book>(null) // book that needs to edit
  public books$ = this.books$$.asObservable();
  public editingBook$ = this.editingBook$$.asObservable();

  constructor() {
    const savedBooks = (() => {
      try {
        return JSON.parse(localStorage.getItem("books"));
      } catch (e) {
        return [];
      }
    })(); // iife as safeguard for JSON.parse

    if (Array.isArray(savedBooks)) {
      this.books$$.next(savedBooks);
    }

    this.books$.pipe(skip(1)).subscribe(books => this.saveChanges(books)); // skip initial null or already saved value
  }

  addBook(book: Book): void {
    const books = this.books$$.value; // optionally const books = this.books$$.value.slice();
    books.push(book);
    this.books$$.next(books);
  }

  deleteBook(book: Book): void {
    const books = this.books$$.value;
    const index = books.findIndex(item => item.author === book.author);
    books.splice(index, 1);
    this.books$$.next(books);
  }

  editBook(book: Book): void {
    this.editingBook$$.next(book);
  }

  private saveChanges(books: Book[]): void {
    localStorage.setItem("books", JSON.stringify(books));
  }
}

В компоненте стараемся избегать всяческих подписок, от них ведь надо не забывать отписываться еще.
В шаблоне компонента просто используем async pipe.

Вот так неправильно.
constructor(private src: BooksService) {}
Правильно так

constructor(
  private booksService: BooksService,
) {}