https://github.com/bodnya29179/ngrx-async-dispatcher
🚀 Simplify asynchronous NgRx action handling in Angular applications with streamlined dispatching and tracking services.
https://github.com/bodnya29179/ngrx-async-dispatcher
angular async-actions async-dispatch ngrx
Last synced: about 1 month ago
JSON representation
🚀 Simplify asynchronous NgRx action handling in Angular applications with streamlined dispatching and tracking services.
- Host: GitHub
- URL: https://github.com/bodnya29179/ngrx-async-dispatcher
- Owner: bodnya29179
- Created: 2024-02-04T10:02:13.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-08T21:27:37.000Z (about 1 year ago)
- Last Synced: 2024-02-08T23:14:34.829Z (about 1 year ago)
- Topics: angular, async-actions, async-dispatch, ngrx
- Language: TypeScript
- Homepage:
- Size: 105 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 NgRx Async Dispatcher
## 📖 Overview
This project aims to enhance the asynchronous handling of NgRx actions in Angular applications by introducing two
essential services: `ActionDispatcherService` and `ActionTrackerService`.
## 🌟 Benefits of this Approach
### Simplified Async Actions
The approach simplifies the dispatching of NgRx actions in an asynchronous manner, reducing boilerplate
code and improving code readability.
### Consistent Error Handling
Developers can handle errors without the need to create additional NgRx Actions for error handling.
The solution streamlines the error reporting process, providing a more straightforward and centralized approach to
managing asynchronous errors.
### Automatic Success Tracking
It eliminates the need for extra operations with NgRx Selectors to listen for the success of dispatched actions.
By using the `ActionTrackerService`, developers can seamlessly track the success of asynchronous operations and
pass relevant data back to the corresponding promise created by the `ActionDispatcherService`.
### Improved Code Organization
Centralizing asynchronous action handling with these services promotes cleaner and more organized code. Developers can
focus on the logic of their actions and effects without being burdened by the intricacies of error management and
success tracking.
### Enhanced Testability
Easy for testing, simplifies processes like mocking and stubbing. This approach enhances test clarity and issue
identification in Angular.
## 📚 Documentation
### `ActionDispatcherService`
The `ActionDispatcherService` is designed to simplify the dispatching of NgRx actions in an asynchronous manner. It
provides a method, `dispatchAsync`, which allows for the asynchronous execution of NgRx actions. Developers can leverage
this service to streamline the handling of asynchronous actions within their Angular services.
#### Usage
Inject `ActionDispatcherService` into your Angular service where you want to handle asynchronous NgRx Actions.
#### Methods
`dispatchAsync(action: Action, actionName: string): Promise`
- Dispatches the provided NgRx Action asynchronously.
- Takes two parameters:
- `action`: The NgRx Action to be dispatched.
- `actionName`: A unique string representing the action/operation.
##
### `ActionTrackerService`
The `ActionTrackerService` provides a mechanism to track the success or failure of dispatched actions. It includes
methods, such as `sendSuccess` and `sendFailure`, which enable developers to communicate the outcome of asynchronous
operations back to the `ActionDispatcherService`. This service promotes consistent error handling and success
signaling in NgRx Effects.
#### Usage:
Inject `ActionTrackerService` to handle success and failure scenarios.
#### Methods
`sendSuccess(actionName: string, data: any): void`
- Sends a success signal to the async dispatcher.
- Takes two parameters:
- `actionName`: The unique string representing the action.
- `data`: Data to be passed to the `dispatchAsync` method. It's optional.
`sendFailure(actionName: string, error: any): void`
- Sends a failure signal to the async dispatcher.
- Errors can be handled in the `try/catch` structure.
- Takes two parameters:
- `actionName`: The unique string representing the action.
- `error`: The error object to be passed to the dispatchAsync method.
## 💡 Examples
These examples demonstrate how to integrate the `ActionDispatcherService` in an Angular service for dispatching
asynchronous actions and how to use the `ActionTrackerService` within an NgRx Effect for success and failure tracking.
Developers can adapt this approach to enhance asynchronous action handling in their Angular applications.
1. Use the `ActionDispatcherService` in Angular Service:
```typescript
import { Injectable } from '@angular/core';
import { ActionDispatcherService } from '@core';
import { yourAction } from './your-actions'; // Import your NgRx action
@Injectable()
export class YourService {
/* Inject the service */
constructor(private readonly actionDispatcher: ActionDispatcherService) {}
async doSomething(): Promise {
return await this.actionDispatcher.dispatchAsync(
/* Action that will be dispatched */
yourAction(),
/* You can use enum for operation names */
'',
);
}
}
```
2. `ActionTrackerService` in NgRx Effect:
```typescript
import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { catchError, EMPTY, map, switchMap, tap } from 'rxjs';
import { ActionTrackerService } from '@core';
import { YourHttpService } from './your-http-service';
import { yourAction, yourActionSuccess } from './your-actions'; // Import your NgRx actions
@Injectable()
export class YourEffect {
readonly yourAction$ = createEffect(() => {
return this.actions$
.pipe(
/* Get the dispatched action */
ofType(yourAction),
switchMap(() => {
/* Calling the HTTP-request */
return this.yourHttpService.someRequest()
.pipe(
/* Sends a success signal to the `dispatchAsync` */
tap((data: any) => this.actionTrackerService.sendSuccess('', data)),
/* Return a success-action to process the HTTP-response in the NgRx Reducer */
map((data: any) => yourActionSuccess({ data })),
catchError((error: any) => {
/* Sends a failure signal to the `dispatchAsync` */
this.actionTrackerService.sendFailure(loadData.type, error);
return EMPTY;
}),
);
}),
);
});
constructor(
private readonly actions$: Actions,
private readonly yourHttpService: YourHttpService,
private readonly actionTrackerService: ActionTrackerService,
) {}
}
```
3. Dispatching action in component:
```typescript
import { Component } from '@angular/core';
import { YourService } from './your-service'; // Import your service
@Component({
selector: 'app-your-component',
template: `
Loading...
{{ data | json }}
`,
})
export class YourComponent {
isLoading: boolean;
data: any;
constructor(private readonly yourService: YourService) {}
async ngOnInit(): void {
this.isLoading = true;
try {
this.data = await this.yourService.doSomething();
} catch (error) {
/* Handle the error appropriately, e.g., show an error message to the user */
console.error('Error:', error);
} finally {
this.isLoading = false;
}
}
}
```
###
Feel free to explore and adapt these benefits to suit your specific use cases and project requirements 🎉.