diff --git a/apps/docs/src/app/pages/docs/angular/store/implementation/index.md b/apps/docs/src/app/pages/docs/angular/store/implementation/index.md index 4a9e5973..41385152 100644 --- a/apps/docs/src/app/pages/docs/angular/store/implementation/index.md +++ b/apps/docs/src/app/pages/docs/angular/store/implementation/index.md @@ -106,7 +106,7 @@ A short example can be found here }); ``` -### dispatchDataToSTore +### dispatchDataToStore An additional util that works in tandem with the aforementioned store assets is the `dispatchDataToStore` util. Using the assets, the util will automatically handle the loading and error state of the provided data. diff --git a/apps/store-test/src/services/courses.service.ts b/apps/store-test/src/services/courses.service.ts index 241cab96..15e0daa0 100644 --- a/apps/store-test/src/services/courses.service.ts +++ b/apps/store-test/src/services/courses.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; import { Store } from '@ngrx/store'; import { of } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; import { CoursesStore, actions, selectors } from '../store/courses.store'; import { StoreService, dispatchDataToStore } from '@ngx/store'; @@ -15,6 +16,8 @@ export class CoursesService extends StoreService { } dispatchCourses() { - return dispatchDataToStore(actions.courses, of(['hello', 'world']), this.store); + return dispatchDataToStore(actions.courses, of(['hello', 'world']), this.store).pipe( + switchMap(() => this.state.courses$) + ); } } diff --git a/libs/angular/store/src/lib/store/spec/store-service.ts b/libs/angular/store/src/lib/store/spec/store-service.ts index 8798dd7d..2ec324fc 100644 --- a/libs/angular/store/src/lib/store/spec/store-service.ts +++ b/libs/angular/store/src/lib/store/spec/store-service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; import { HttpClient } from '@angular/common/http'; import { StoreService } from '../abstracts'; @@ -49,7 +50,7 @@ export class SpecStoreService extends StoreService { actions.channel, this.httpClient.get('test'), this.store - ); + ).pipe(switchMap(() => this.channel$)); } public clearChannel(): void { @@ -62,7 +63,7 @@ export class SpecStoreService extends StoreService { this.httpClient.get('test'), this.store, actionType - ); + ).pipe(switchMap(() => this.videos$)); } public clearVideos(): void { diff --git a/libs/angular/store/src/lib/store/spec/store-state.service.ts b/libs/angular/store/src/lib/store/spec/store-state.service.ts index 4e0f8d01..50f97e61 100644 --- a/libs/angular/store/src/lib/store/spec/store-state.service.ts +++ b/libs/angular/store/src/lib/store/spec/store-state.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { Store } from '@ngrx/store'; -import { Observable, of, throwError } from 'rxjs'; +import { Observable, of, throwError, switchMap } from 'rxjs'; import { BaseStoreAssets, EntityStoreAssets, StoreFlowAssets } from '../interfaces'; import { createBaseStoreAssets, @@ -38,14 +38,18 @@ export class StoreStateService extends StoreService { actions.data, throwError(() => new Error('This is an error')), this.store - ); + ).pipe(switchMap(() => throwError(() => new Error('This is an error')))); } setData(payload: string[]): Observable { - return dispatchDataToStore(actions.data, of(payload), this.store); + return dispatchDataToStore(actions.data, of(payload), this.store).pipe( + switchMap(() => this.state.data$) + ); } setCompleted(payload: boolean): Observable { - return dispatchDataToStore(actions.isCompleted, of(payload), this.store); + return dispatchDataToStore(actions.isCompleted, of(payload), this.store).pipe( + switchMap(() => this.state.isCompleted$) + ); } } diff --git a/libs/angular/store/src/lib/store/utils/dispatch-data-to-store/dispatch-data-to-store.util.ts b/libs/angular/store/src/lib/store/utils/dispatch-data-to-store/dispatch-data-to-store.util.ts index c192a3c0..368357b0 100644 --- a/libs/angular/store/src/lib/store/utils/dispatch-data-to-store/dispatch-data-to-store.util.ts +++ b/libs/angular/store/src/lib/store/utils/dispatch-data-to-store/dispatch-data-to-store.util.ts @@ -1,6 +1,6 @@ import { Store } from '@ngrx/store'; import { Observable, throwError } from 'rxjs'; -import { catchError, finalize, tap } from 'rxjs/operators'; +import { catchError, finalize, tap, map } from 'rxjs/operators'; /** * Dispatches data to the store based on a provided action and Observable. Loading and error state will be handled by default. * @@ -15,7 +15,7 @@ export const dispatchDataToStore = ( data: Observable, store: Store, dispatchType: 'set' | 'add' | 'update' = 'set' -): Observable => { +): Observable => { // Iben: Set the loading state to true and the error state to false to start a new set store.dispatch(dispatchAction.loading({ payload: true })); store.dispatch(dispatchAction.error({ payload: false })); @@ -40,6 +40,7 @@ export const dispatchDataToStore = ( // Iben: Set the loading state to false finalize(() => { store.dispatch(dispatchAction.loading({ payload: false })); - }) + }), + map(() => void 0) ); };