Как сохранить наблюдаемые данные из API с помощью rxJS в Angular 5?

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

Итак, я пошел дальше и попытался использовать BehaviorSubjects для хранения данных. Я хорошо поработал, используя это так:

Услуга:

books = new BehaviorSubject<Book[]>(null);
setBooks(book: Book[]) {
    this.books.next(book);
}
getBooks() {
    this.http.get(...).do(
        (res) => {
            this.setBooks(res.books);
        }
    );
}

Составные части:

ngOnInit() {
    this.booksService.books.subscribe(
        (books) => {
            // in case the api was never called
            if (books == null) {
                return this.booksService.getBooks().subscribe();
            }
            console.info(books);
            // ...
        }
    );
}

Он отлично работает, когда есть книги, но если книги представляют собой пустой массив (что является одним из ожидаемых вариантов поведения), программа застревает в цикле, вызывая API навсегда. Тестируя его, я решил, что он застревает в части .do () в вызове службы, но я не понимаю, почему.

Я читал, что здесь BehaviorSubject не предназначен для использования с нулевым начальным значением, но, как и предложил @estus, при использовании ReplaySubject (1) происходит то же самое.

Интересно, есть ли «правильный» способ хранить такие данные. Я также не думаю, что использование localstorage - лучшее решение, поскольку это может быть большой объем данных, и он сильно меняется в процессе использования приложения.