Dealing with API Errors in Ngrx

I came across an interesting scenario in the ngrx example-app provided on Github. When starting a new project, I always strive to follow the best practices, so I referred to the example app for guidance. In one particular instance within the application, they demonstrate the process of deleting a book entity:

  1. The component dispatches a request with the action 'removeBook' and includes the 'book' object as payload (selected-book-page.component.ts:40)
  2. An effect handles this request, and if successful, it triggers the 'removeBookSuccess' action which ultimately removes the book from the store (collection.effects.ts:65)

However, if the removal fails, it triggers the 'removeBookFailure' action which has a similar handling mechanism as 'addBookSuccess'. Is this additional step necessary? Considering that the book was never actually removed in the first place, I'm wondering if there's something crucial I might be overlooking here.

on(
    CollectionApiActions.addBookSuccess,
    CollectionApiActions.removeBookFailure,
    (state, { book }) => {
      if (state.ids.indexOf(book.id) > -1) {
        return state;
      }
      return {
        ...state,
        ids: [...state.ids, book.id],
      };
    }
  ),

If anyone can shed some light on this issue, I would greatly appreciate it!

Answer №1

Despite its odd appearance, this code snippet addresses API failures. My expectation is for the book to be removed upon dispatching the removeBook action.

While successful API calls are adequately managed, failure requires us to undo the book removal action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the problem between typescript and Prisma ORM as I attempt to locate a distinct item?

I'm encountering a problem with using the prisma .findUnique() function. Even though my code doesn't display any compilation errors, attempting to access a product page triggers a runtime error. PrismaClientValidationError: Invalid `prisma.produ ...

Guide for Showing Data from Json Mapper in Angular 5

As a newcomer to Angular5 with TypeScript, I am trying to figure out how to display data from my JSON. I have an API that was created using Java. I have created a JSON Mapper in my Angular code like this : The JSON generated from my Java application looks ...

The Angular route functions flawlessly in the development environment, but encounters issues when deployed to

I have a project built with Angular 2, During development on localhost, everything runs smoothly. However, once I build a production version using (npm run build: prod) and navigate to the route on the server, I encounter a 404 error indicating that the r ...

Is there a way to update JSON data through a post request without it getting added to the existing data?

Hello, I am currently delving into Angular2 and encountering a problem concerning RestAPI. When I send a post request to the server with a JSON file, I intend to update the existing data in the JSON file; however, what actually happens is that the new data ...

Merging JSON Array of Objects from Separate Http Services in Angular 8

I am currently working on a new Angular 8 project where I need to retrieve JSON data from two different services in my component. Both sets of data are arrays of objects. My goal is to merge the objects from these arrays and then post the combined data bac ...

What is the best way to run a single test prior to each component test in Angular?

I'm faced with a challenge - I want to run this test in every component's test suite without repeating the code in each component.spec.ts file. This test is designed to check for accessibility violations using axe: it('should have less than ...

Deciphering intricate Type Script Type declarations

I am seeking clarification on how to utilize the object type for sending headers, aside from HttpHeaders provided in the HTTPClient declaration. While working with Angular HttpClient, I aim to include headers using an Object. However, I am unsure of how t ...

Encountering an Issue with Registering the Angular 7 Service Worker - Error with ngsw-worker

Problem: Encountering ERR_INVALID_RESPONSE and /ngsw-config.json:-Infinity Parser error when trying to access the ngsw-worker.js file in network traffic. Refer to the image below: https://i.stack.imgur.com/Ejozw.png Technology Used: Angular CLI with An ...

Contrast between the node modules "highcharts-angular" and "angular-highcharts" for Angular version 7

In my upcoming Angular v7 application using the latest version of Highcharts, I have encountered two similar node modules listed on the HighCharts tutorial page. However, I'm unsure of the differences between them: Node module: highcharts-angular No ...

Tips on saving a moved option item from one table to another in HTML:

Having an issue with dragging tables between different lists in Angular. The tables are generated by separate ngFor loops and I am using cdkDrag for the drag and drop functionality. The problem arises when I set an option in a dropdown and then drag the ta ...

Retrieving child elements from parent identifiers using Typescript

I've been working on creating a new array with children from the data fetched from my database. While my initial attempt was somewhat successful, I believe there are some missing pieces. Could you assist me with this? Here is the raw data retrieved f ...

Parsing POST requests in Express.js from an Angular 2 application

I am currently encountering an issue with my Node.js code: app.post('/register', function(req, res) { console.log(req.body); It seems that the req object does not contain the body property. When using Angular2, I am sending stringified JSON ...

Issue with data not being recorded accurately in React app after socket event following API call

The Application Development I have been working on an innovative app that retrieves data from the server and visualizes it on a chart while also showcasing the total value in a Gauge. Additionally, the server triggers an event when new data is stored in t ...

Retrieve selected button from loop typescript

https://i.stack.imgur.com/DS9jQ.jpgI have an array of individuals that I am looping through. It's a bit difficult for me to explain, but I want something like this: <div *ngFor="let person of persons"> {{person.name}} {{person.surname}} <but ...

Ways to access the chosen value from Ionic's popover modal

I have been working on a simple Ionic 4 Angular app and I am using an Ionic popover modal. The code below shows how I open the popover modal in my application: //home.page.ts async openModal(ev: Event) { const modal = await this.popoverController.create({ ...

Is there a function return type that corresponds to the parameter types when the spread operator is used?

Is it possible to specify a return type for the Mixin() function below that would result in an intersection type based on the parameter types? function Mixin(...classRefs: any[]) { return merge(class {}, ...classRefs); } function merge(derived: any, ... ...

Customizing a ng-template with my own HTML content - a step-by-step guide

As I work on creating a custom web component inspired by the accordion component from ng-bootstrap, I'm currently experimenting with the functionality. Feel free to test out the original component on stackblitz. One specific feature I am aiming for is ...

Dynamic Route Matching in NextJS Middleware

Currently, I am in the process of developing a website that incorporates subdomains. Each subdomain is linked to a file-based page using middleware. Take a look at how the subdomains are being mapped to specific pages: app.com corresponds to /home app.com ...

I'm having trouble with Angular pipes in certain areas... but I must say, Stackblitz is truly incredible

Encountering this issue: ERROR in src\app\shopping-cart-summary\shopping-cart-summary.component.html(15,42): : Property '$' does not exist on type 'ShoppingCartSummaryComponent'. The error disappears when I remove the c ...

Securing access to a RESTful web service in AngularJS 2

I'm looking to access an API that returns a JSON file, but I'm unsure of how to include the authentication in my HTTP header. Here's my TypeScript service code: import {Http} from 'angular2/http'; import 'rxjs/add/operator/ma ...