Package Exports

ngrx-correlation-id
ngrx-correlation-id/bundles/ngrx-correlation-id.umd.js
ngrx-correlation-id/fesm2015/ngrx-correlation-id.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngrx-correlation-id) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngrx-correlation-id

A ngrx store library to track an asynchronous activity such as a http request, a ngrx effect or anything else.

Supports

Angular 13 and ngrx/store@13
Angular 12 and ngrx/store@12
Angular 11 and ngrx/store@11
Angular 10 and ngrx/store@10
Angular 9 and ngrx/store@9
Angular 8 and ngrx/store@8
Angular 7 and ngrx/store@7
Angular 6 and ngrx/store@6

API short list

Please check source code

NgrxCorrelationIdModule

CidTask

cidTask(correlationId, Observable)
cidWait()

store.select(selectCid, correlationId)

cidStart(correlationId: string)
cidPayload(correlationId: string, payload: any)
cidEnd(correlationId: string)
cidRemove(correlationId: string)

How to use

Import NgrxCorrelationIdModule in the same module where you import StoreModule.forRoot.

import {NgrxCorrelationIdModule} from 'ngrx-correlation-id';

@NgModule({
    imports: [
        StoreModule.forRoot(/* ... */),
        NgrxCorrelationIdModule, // <- import it here
    ],
})
export class AppModule {}

Add cid: string to props of an action you want to track.

export const loadUsers = createAction(
  '[User] Load Users',
  props<{cid: string}>(), // <- correlation id
);

Wrap an effect pipe with cidTask. The first argument is a cid of the current task. The second argument is a stream that should be tracked.

Optionally you can dispatch cidPayload action with a custom payload. In this case we want our payload to be an array of ids of users.

import {cidPayload, cidTask} from 'ngrx-correlation-id';

@Injectable()
export class UsersEffects {
    @Effect()
    public readonly loadUsers$ = this.actions$.pipe(
        ofType(loadUsers),
        switchMap(({cid}) => cidTask(cid, this.http.get<Array<User>>('v2/api/users').pipe(
            switchMap(users => of(
                upsertUsers({items: users}),
                cidPayload({cid, payload: users.map(user => user.id)}),
            )),
        ))),
    );

    constructor(
        protected readonly actions$: Actions,
        private readonly http: HttpClient,
    ) {}
}

Update a component to use cid and all the features of the lib.

import {cidRemove, CidTask, cidWait, selectCid} from 'ngrx-correlation-id';

export class EntityComponent implements OnInit, OnDestroy {
    public readonly users$: Observable<Array<User>>;

    // set here an unique value to distinguish this task from others.
    private readonly cid: string = `randomString`;

    constructor(private readonly store: Store) {
        // selecting the related task that belongs to cid.
        this.users$ = this.store.select<CidTask<Array<string>>>(selectCid, this.cid).pipe(

            // doesn't emit until the task isn't completed
            cidWait(), // waits until the task starts, then waits until the task ends and the task.

            map(task => task.payload),
            withLatestFrom(this.store.select(selectUsers)),
            map(([ids, users]) => users && users.filter(user => ids.indexOf(user.id) !== -1) || []),
        );
    }

    public ngOnInit(): void {
        // dispatching an action to load users.
        this.store.dispatch(loadUsers({cid: this.cid}));
    }

    public ngOnDestroy(): void {
        // clearing payload and selector
        this.store.dispatch(cidRemove({cid: this.cid}));
        selectCid.release();
    }
}