The type 'Observable<void | AuthError>' cannot be assigned to 'Observable<Action>'

I am encountering an error that reads:

error TS2322: Type 'Observable<void | AuthError>' is not assignable to type 'Observable<Action>'. Type 'void | AuthError' is not assignable to type 'Action'. Type 'void' is not assignable to type 'Action'.

Can someone explain what this error means and how I can resolve it?

  googleSignIn: Observable<Action> = this.actions.pipe(
    ofType(authActions.GOOGLE_SIGNIN),
    map((action: authActions.GoogleSignIn) => action.payload),
    switchMap(() => {
      return Observable.fromPromise(this.authService.googleSignIn());
    }),
    catchError(err => {
      return Observable.of(new authActions.AuthError({ error: err.message }));
    })
  );

authService.googleSignIn()

  googleSignIn() {
    this.logger.debug('Initialising desktop Google sign in');
    const provider = new auth.GoogleAuthProvider();
    let firstName = null;
    let lastName = null;
    return this.afAuth.auth.signInWithPopup(provider).then(async (result) => {
      if (result) {
        firstName = result.additionalUserInfo.profile['given_name'];
        lastName = result.additionalUserInfo.profile['family_name'];
        const path = `/users/${result.user.uid}/`;
        const doc = await this.firebaseService.docExists(path);
        if (!doc) {
          this.userService.processNewUser(result, firstName, lastName);
        }
        if (doc) {
          this.logger.debug(`${firstName} ${lastName} is a returning desktop user`);
        }
      }
    }).catch((error) => {
      this.simpleModalService.displayMessage('Oops', error.message);
    });
  }

Answer №1

If you are implementing ngrx v8, the solution can be as follows:

The issue at hand is that you must return an action from your effect.

 fetchPost$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PostActions.LoadPost),
      switchMap(action => {
        return this.postService
          .getPost(action.postId)
          .pipe(
            map(
              (post: IPost) => PostActions.LoadPostSuccess({ post }), // make sure to return this
              catchError(errors => of(PostActions.LoadPostFail(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

Assign a value to the Angular directive for the SharePoint People Picker

In my create form, I have successfully used a directive to capture and store values in SharePoint via REST. The directive I am using can be found at this link. Within my HTML, I am implementing the directive like this: <sp-people-picker name="CC" id=" ...

Node.JS encountered an issue preventing the variable from being saved

I've been attempting to store the request.headers, but every time it outputs as [object Object] in the txt file. var http = require("http"); url = require("url"); fs = require("fs"); var events = require('events'); var even = new events.Ev ...

Angular 14 is experiencing issues with NgRx Store failing to properly recognize the payload

The issue lies in TypeScript not recognizing action.payload.index as a valid property. I am unsure how to resolve this problem and make the 'index' visible in my project. shopping-list.actions.ts import {Action} from "@ngrx/store"; im ...

What is the best way to leverage a webbrowser control for design purposes while keeping the functionality in C#?

Observing some apps, it seems they utilize HTML/CSS/Javascript for styling - a much simpler approach compared to crafting the same thing natively. However, these apps have their logic written in C#. Sadly, I am clueless on connecting the two. Research yiel ...

Retrieve the location of the selected element

We are faced with the challenge of determining the position of the button clicked in Angular. Do you think this is achievable? Our current setup involves an ng-grid, where each row contains a button in column 1. When the button is clicked, we aim to displ ...

Add a trash can or delete icon within every row of a table using Vue.js

I am new to vue.js and I'm struggling to implement a trash icon in each row of a table for deleting rows. Additionally, I'm trying to make the input of a cell act as a dropdown menu or list within the table rows. I recently came across this scrip ...

Troubleshooting CodeIgniter's AJAX call functionality issue

I have been attempting to test AJAX functionality within CodeIgniter, but unfortunately, I haven't had any success so far. Can someone please point out where I might be making a mistake? Below is my test_page.php: <!DOCTYPE html> <head> ...

"Enhance your listening experience with an audio player featuring album covers as captivating

Is there a way to create an audio player with the album cover image serving as the background, while ensuring all control buttons are displayed on top of that same image? I attempted using the following code snippet: <audio controls = 'controls&ap ...

What is the best way to implement a composite primary key in DocumentClient.batchWrite()?

I am attempting to conduct a batch delete process based on the instructions provided in this documentation. The example given is as follows: var params = { RequestItems: { /* required */ '<TableName>': [ { DeleteRequest: ...

Accessing the JSON file from the Google Maps Places API using either JavaScript or PHP

In the midst of developing an application, I am working on fetching a list of places near a specific latitude and longitude. After obtaining an API key, inputting it into the browser URL successfully retrieves a JSON file containing the desired places dat ...

AngularFireFunctions httpCallable doesn't reflect updated data post-response

Despite successfully receiving a value from an Observable using AngularFireFunctions' httpsCallable, the view fails to update even after the http request is completed. In my simple component, I utilize AngularFireFunctions to invoke an httpCallable f ...

Best practices for incorporating and leveraging node packages with Laravel Mix

As I embark on my Laravel (v 8.x) Mix project, I am encountering challenges when it comes to incorporating JavaScript from node modules. To kick things off, here is a snippet from my webpack.mix.js: mix.js('node_modules/mxgraph/javascript/mxClient.mi ...

Encountering a glitch while trying to utilize History.js

I've decided to incorporate History.js into my web application to address the lack of support for history.pushState() in Internet Explorer. After reviewing various demos and tutorials, I have written this code snippet: var historyJs = window.History; ...

Executing Backbone.history.start() prevents the back button from navigating away from the current page

I've encountered this issue in multiple apps, leading me to question if there's an error in my handling of Backbone history. The scenario is as follows... There are two pages: index.html app.html The index page is a standard HTML page with a l ...

Is it possible to easily remove the trailing comma, period, or other punctuation from the end when using the JavaScript pug template engine?

Apologies for the confusion in my question wording. To illustrate, here is an example piece of code: p #[strong Genre]&nbsp; each val in book.genre a(href = val.url) #{val.name} | , I am trying to figure out how to format a comma ...

TypeScript seems to be failing to detect the necessary checks before they are used

I've been pondering on how to ensure TypeScript acknowledges that I am verifying the existence of my variables before using them. Below is the code snippet : Here's the function responsible for these checks: function verifyEnvVars(){ if (!proc ...

Can a ternary operator be used within an index type query when extending a partial type?

Can anyone provide a detailed explanation of the process unfolding in this snippet? I'm having trouble grasping how this code leads to a type declaration. type ModalErrors = Partial< { [key in keyof InputGroup]: InputGroup[key] extends Speci ...

Is there a way to cancel hiding on a q-dialog?

I'm currently working on integrating a confirmation modal within a dialog box that includes form input fields. The purpose is to alert the user when they try to exit without saving their changes. The modal should appear every time the user modifies th ...

Can you provide a guide on setting up and utilizing mathlive within NuxtJS?

Can anyone assist me? I am trying to figure out why my code is not working or if I have implemented it incorrectly. I used npm i mathlive to obtain input. However, following the instructions for implementing nuxt plugins in the documentation has not yield ...

How to link Array with Observable in Angular2 Typescript without using .interval()

Is it possible to achieve the same functionality without using the "interval()" method? I would like to link an array to an observable, and update the array as well as have the observable monitor the changes. If this approach is feasible, how can we inco ...