https://github.com/satantime/ngrx-correlation-id
A ngrx store library to track an asynchronous activity.
https://github.com/satantime/ngrx-correlation-id
Last synced: about 1 year ago
JSON representation
A ngrx store library to track an asynchronous activity.
- Host: GitHub
- URL: https://github.com/satantime/ngrx-correlation-id
- Owner: satanTime
- License: apache-2.0
- Created: 2020-05-19T18:48:16.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-07T19:47:33.000Z (about 1 year ago)
- Last Synced: 2025-04-07T20:40:37.218Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngrx-correlation-id
- Size: 52.8 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 155
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ngrx-correlation-id
[](https://badge.fury.io/js/ngrx-correlation-id)
[](https://app.circleci.com/pipelines/github/satanTime/ngrx-correlation-id)
[](https://coveralls.io/github/satanTime/ngrx-correlation-id?branch=master)
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`.
```typescript
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.
```typescript
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.
```typescript
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>('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.
```typescript
import {cidRemove, CidTask, cidWait, selectCid} from 'ngrx-correlation-id';
export class EntityComponent implements OnInit, OnDestroy {
public readonly users$: Observable>;
// 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>>(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();
}
}
```