https://github.com/acandylevey/ngrx-http-tracking
https://github.com/acandylevey/ngrx-http-tracking
angular ngrx typescript
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/acandylevey/ngrx-http-tracking
- Owner: acandylevey
- Created: 2021-07-29T12:13:18.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-09-29T00:00:51.000Z (8 months ago)
- Last Synced: 2025-10-20T18:40:02.516Z (8 months ago)
- Topics: angular, ngrx, typescript
- Language: TypeScript
- Homepage: https://acandylevey.github.io/ngrx-http-tracking/
- Size: 1.37 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-angular - ngrx-http-tracking - This NgRx library integrates with existing stores to reduce boilerplate and simplify handling HTTP request states like loading, success, and error. (State Management / NgRx)
- fucking-awesome-angular - ngrx-http-tracking - This NgRx library integrates with existing stores to reduce boilerplate and simplify handling HTTP request states like loading, success, and error. (State Management / NgRx)
README
# NgRx Http Tracking
[](https://github.com/acandylevey/ngrx-http-tracking/actions/workflows/npm-publish.yml)
[Checkout the demo](https://acandylevey.github.io/ngrx-http-tracking/)
This NgRx library is aims to slot into your pre-existing NgRx stores to reduce the amount of boiler plate code you need to write and to make handling the loading, success and error states of HTTP Requests significantly easier.
Compatibility
```
Angular 16+
```
Installing
```
npm i @acandylevey/ngrx-http-tracking
```
Importing the module
```
...
import { NgrxHttpTrackingModule } from '@acandylevey/ngrx-http-tracking';
imports: [
...
NgrxHttpTrackingModule,
]
```
Creating a http-tracked action
```
export const fetchUsers = createTrackingActions(
'Users',
'fetchUsers'
);
```
Creating your effect
```
import { UserApiService } from './user-api.service';
import * as UserActions from './user.actions';
...
fetchUsers$ = createTrackingEffect(
this.actions$,
UserActions.fetchUsers,
this.userApi.fetchUsers,
'Could not load users'
);
```
Your reducer doesn't change much, except you no longer need to worry about keeping track of the load state
```
const usersReducer = createReducer(
initialState,
on(UserActions.fetchUsers.loaded, (state, { payload }) =>
userssAdapter.setAll(payload, { ...state })
)
);
```
Tracking the results
By default, all actions are tagged with a global tag that can then be easily intercepted a global level, to provide global error handling or a global loading spinner if any actions are waiting on http requests.
```
isLoaded$ = this.httpTracker.isLoaded(UserActions.fetchUsers);
isLoading$ = this.httpTracker.isLoading(UserActions.fetchUsers);
isGloballyLoading$ = this.httpTrackingFacade.getGlobalLoading();
globalErrors$ = this.httpTrackingFacade.getGlobalErrors();
```
You can also apply your own tags to a set of actions and then get summarised results back
```
export const fetchUsers = createTrackingActions(
'Users',
'fetchUsers',
true, // has global tag still
['user-profiles']
);
isTagLoading$ = this.httpTracker.isTagLoading('user-profiles');
```
There is also a provided way of simple continuing a peice of logic once a http request as resolved (Either success or failure)
Firing the reuqest from a facade
```
fetchUsers() {
this.store.dispatch(UserActions.fetchUsers.loading());
return UserActions.fetchUsers;
}
```
Tracking it
```
this.httpTrackingFacade
.getResolved(this.userFacade.fetchUsers())
.subscribe((result) => {
console.log(`The result from the fetch users call was: {result}`);
});
```