angular How to load data from ngrx store instead of loading it from server

Question

I am having the following code in my effects file

loadAllBooks$ = createEffect(() =>
    this.actions$.pipe(
    ofType(invokeBooksAPI),
    switchMap(() => {
         return this.bookService.get()
         .pipe(map((data) => booksFetchAPISuccess({ allBooks: data })))
       })
     )
    );

This loads data from the local json and here is the service call for the same

 get() {
    return this.httpClient.get<Book[]>('http://localhost:3000/books')
  }

Now what I need is I need to load the data from store instead of loading it from server and after 5 minutes I need to load it from server, is it possible to achieve that scenario.

I am using npm i json-server which runs locally on 3000 port where I did some modifications as per need

Here is the source code for the same I am working on

https://github.com/Github743/NgRxCRUD

Answer 1

I have added a state for book as follows

export interface BookState {
    books: Book[],
    expired: boolean
}

and in the effects checking as follows for expired

loadAllBooks$ = createEffect(() =>
    this.actions$.pipe(
        ofType(invokeBooksAPI),
        withLatestFrom(this.appStore.select(isExpired)),
        tap(([action, isExpired]) => console.log(isExpired)),
        filter(([action, isExpired]) => isExpired),
        switchMap(() => {
            return this.bookService.get()
                .pipe(map((data) => booksFetchAPISuccess({ allBooks: data })
                ))
        }
        ),
    ),
);

Setting the expired property to true after success with a delay of 1 minute

booksFetchSuccess$ = createEffect(() =>
    this.actions$.pipe(
        ofType(booksFetchAPISuccess),
        delay(60000),
        map(() => {
            return resetBooks()
        })
    )
);

Action for the same

export const resetBooks = createAction(
    "[Books API] Reset Books in Store"
);

reducer for reset

on(resetBooks, (state) => {
        return {
            ...state,
            expired: true
        }
    }),

With this changes I am able to achieve as per required