Unresolved issue with RxJS - Finalize not triggering

When attempting a logout request, I have encountered an issue where the same actions need to be dispatched regardless of whether the request is successful or fails. My initial plan was to utilize the finalize() operator for this purpose.

Unfortunately, I am struggling to get it to work as intended, as it does not seem to execute at all.

The current effect code is:

/**
 * When the user logs out :
 * Try to delete its push token
 * Clear user
 */
logout$ = createEffect(() =>
    this.actions$.pipe(
        ofType(ClassicAuthActions.logout),
        switchMap(action => this.api.logout().pipe(
            map(() => ClassicAuthActions.logoutDidSuccess()),
            catchError(err => of(ClassicAuthActions.logoutDidFail())),
            finalize(() => of(
                    ClassicAuthActions.deleteUserCommunicationToken(),
                    ClassicAuthActions.clearUser(action.redirect)
            )),
        ))
    )
);

As I am relatively new to RxJS, any guidance or assistance on this matter would be highly appreciated.

Answer №1

finalize serves as a side effect operator, which means that it does not allow for returning additional values.

If your intention is to conclude an observable with a specific value, you can utilize endWith:

numbers$.pipe(endWith(99));

In more intricate situations where you want to end with another observable, consider using concatWith:

numbers$.pipe(concatWith(of(99)));

Answer №2

By utilizing the switchMap function to trigger an HTTP request, the code will remain inactive until a subscriber is attached to logout$.

If an error occurs, it seems that you are not propagating the error within the catchError block. The absence of the error in the finalize block explains why it does not execute during errors.

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

Change a nullable string property within an interface to a non-nullable string property

Looking at two interfaces, one with a nullable vin and the other without: interface IVehicle { vin: string | null; model: string; } interface IVehicleNonNullVin { vin: string; model: string; } The goal is to convert a model from IVehicle ...

The React Native Flatlist encountered an error due to a mismatch in function overloads

I'm currently working on a React Native app using Typescript, and I've encountered an issue with the Flatlist renderItem function. As someone who is new to both Typescript and React Native, I received the following error message: No overload ma ...

Tips for utilizing RouterLink within an HTML template

Angular 2.3.0 I created a module in Angular 2 as shown below: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule, Routes } from '@angular/router'; impo ...

The module 'crypto-js' or its corresponding type declarations cannot be located

I have a new project that involves generating and displaying "QR codes". In order to accomplish this, I needed to utilize a specific encoder function from the Crypto library. Crypto While attempting to use Crypto, I encountered the following error: Cannot ...

Is it necessary to manually unsubscribe from observables in the main Angular component?

I'm facing a dilemma with my Observable in the root Angular (6.x) component, AppComponent. Typically, I would unsubscribe from any open Subscription when calling destroy() using the lifecycle hook, ngOnDestroy. However, since the AppComponent serv ...

tips for managing response time in firebase authentication state

I've been facing an issue with my web application in efficiently checking if it is firebase authenticated. The 'auth state object' doesn't seem to be functioning correctly on my template, as the expected sections are not appearing at al ...

having difficulty configuring drizzle on express

When configuring the database connection with MySQL using drizzle, I encountered a puzzling situation. I am utilizing express and top-level await without async, but I'm unsure of how it all fits together. import { drizzle } from "drizzle-orm/mysq ...

Utilize dual providers with distinct generic typings in Angular Jasmine testing for a single class

I am currently working on creating two separate mock providers and spys for classes that are injected into my component. Even though the dependencies involve the same class, they use different typings through the use of generics. constructor( private reado ...

Changing the row property value of a textarea dynamically based on text input in ReactJS

Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: https://i ...

Compiler unable to determine Generic type if not explicitly specified

Here is a simple code snippet that I am working with: class Model { prop1: number; } class A<TModel> { constructor(p: (model: TModel) => any) {} bar = (): A<TModel> => { return this; } } function foo<T>(p: ...

Choosing specific information in Typescript response

I am encountering an issue with my HTML where it displays undefined(undefined). I have checked the data in the debugger and I suspect that there may be an error in how I am using the select data. Here is a snippet of the code: <div *ngIf="publishIt ...

How to create a beautiful grid layout using @angular/flex-layout, @angular/material, and mat-card to showcase stunning images

I have created a basic layout that looks like this: Cell 0 Cell 1 Cell 2 <!-- these are not to appear in actual render __________________________________ | Image 0 | Image 1 | Image 2 | |----------| Image 1 |----------- | text here| ...

Sending a parameter to a route guard

I've been developing an application that involves multiple roles, each requiring its own guard to restrict access to various parts of the app. While I know it's possible to create separate guard classes for each role, I'm hoping to find a mo ...

Cypress: Importing line in commands.ts is triggering errors

After adding imports to the commands.ts file, running tests results in errors. However, in commands.ts: import 'cypress-localstorage-commands'; /* eslint-disable */ declare namespace Cypress { interface Chainable<Subject = any> { c ...

Error in Angular production build due to Clean CSS failure

Encountering the following error during the code build process, any solutions? > ng build --prod --no-aot --base-href 92% chunk asset optimizationD:\myproject\node_modules\@angular\cli\node_modules\clean-css\lib&bsol ...

Guide to importing simulated data from a JSON file in Angular 2 Karma Jasmine tests

Currently, I am working on creating karma jasmine test case for angular 2. We have encountered a requirement to mock data in a separate JSON file due to the large amount of data (to maintain code cleanliness). After extensive research, we were unable to f ...

Implementing ETag in Angular 2

Implementing the odata standard which utilizes ETag has presented a challenge for me, particularly with PATCH requests. Each PATCH request requires sending the ETag in the header as If-None-Match. A HTTP status of 200 indicates that the change was successf ...

Is it possible to use non-numeric values as keys in a Typescript Map?

During a lesson: private items: Map<number, string> = new Map(); ... this.items[aNumber] = "hello"; Results in this error message: An element has an any type because the expression of type number cannot be used to index type Map<numbe ...

Ways to ensure that your Angular component.ts file is executed only after the body has completely loaded without relying on any external

I am attempting to add an event listener to an element created with a unique identifier using uuid, but I keep getting an error that states "Cannot read properties of null (reading 'addEventListener')" export class CommentItemComponent implements ...

Optimal method for efficiently caching data when toggling between list view and detail view within Angular 12

In my Angular App, I have implemented two components - a list view and a details view. Users can switch between these components, both of which utilize multiple async pipes. To minimize the number of http requests to the backend, I decided to cache data u ...