The error message "Type 'Observable<void>' cannot be assigned to type 'void | Action | Observable<Action>' when integrating an effect" is displayed

Encountering an error when trying to add effects using the 'run' method. Attempted to manually return a string, number, and other types, but nothing seems to work.

Here is the effects code snippet:

@Effect() 
getRoles$: Observable<Roles[]> = this.dataPersistence.fetch(CreateActionTypes.GetRoles, {
    run: (action: GetRoles) => {

       return this.formService
         .getRoles()
         .pipe(map(roles => {
           return new RolesLoaded(roles);
          }));
    },
    onError: (action: GetRoles, error) => {
      console.error(error);
      return new RolesLoadError(error);
    }
  });

The error message received is as follows:

ERROR in apps/app/src/app/+state/create.effects.ts(32,5):

error TS2322:
Type '(action: GetRoles) => Observable' is not assignable to type '(a: GetRoles, state?: CreatePartialState) => void | Action | Observable'.
Type 'Observable
' is not assignable to type 'void | Action | Observable'.

Answer №1

When working with an @Effect, it's important to make sure that it returns an observable of a single Action, not an array of Actions.

It seems like there might be some confusion between different concepts in your specific case.

Check out this example of how to properly implement an @Effect:

  updateProject$ = createEffect(() => this.actions$.pipe(
    ofType(UPDATE_PROJECT),
    switchMap(({ id, changes }) => this.projectService.updateProject(id, changes).pipe(
      map(updatedProject => UPDATE_PROJECT_SUCCESS({ project: updatedProject })),
      catchError(error => of(UPDATE_PROJECT_FAILURE({ error })))
    )),
  ));

Answer №2

The outcome varies depending on the result of the getRoles() function. I encountered a comparable issue before. Avoid using pipe if getRoles() returns a promise.

return this.formService
     .getRoles().then(()=>{
        return {type: TYPEACTION} 
})

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 causes fs to produce an error when routing to a new page, yet refreshing the page resolves the issue?

Concern: I have developed a NextJs application with 4 input fields, each connected to a predefined options list read in as a json file within the project. The user can select two fields and then proceed to a search page by clicking a button. From the sear ...

What steps do I need to take to start working on this angular project?

As I explore NativeScript, I came across an Angular-based project on play.nativescript.org that caught my attention: After downloading the project and navigating to the top-level directory in my cmd prompt, I attempted to run "ng serve." However, I encoun ...

Looking to implement pagination in Vue.js - what steps should I take?

Hi there, I'm currently facing an issue while trying to paginate my data. The error message in my console reads: Property or method "$index" is not defined on the instance but referenced during render. Below is my HTML template where I display the da ...

Creating a Vue component using v-for and a factory function allows for dynamic

I am currently developing a Table component using factory functions for all logic implementation. Within a v-for loop, I generate a cell for each item in every row. The factory Below are the actual factories that I import into the respective vue page whe ...

The tooltip is obscured by the table row

I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else. Some things I' ...

Using jQuery ajax in PHP, the ability to remove retrieved information from a different page is a

I'm currently working on a jQuery AJAX PHP application that allows for adding, deleting, and displaying records using switch case statements to streamline the code. Everything seems to be functioning correctly with inserting and displaying records, bu ...

The function you are trying to call in Node.js is not defined

Just starting out with NodeJs and trying to implement async/ series, but encountering an error: task.save is not a function Here is the code snippet I am working with: async.series([ (cb) => { Task .findById(id) ...

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

"Utilizing JSON information to create visually appealing graphs and charts

Struggling with syntax and in need of assistance. I have a basic data set that I want to display as a timeline with two filled lines (Time Series with Rangeslider). This is the format of my data set: [{"pm10": 12.1, "pm25": 7.0, "time": "13.08.2018 12:25 ...

Refresh numerous HTML <div>'s using data from a JSON object

Looking to automatically update the homepage of my website with the ten most recent "posts" from the server. Here's an example HTML format: <div id="post1"> <p id="link"> </p> </div> <div id="post2"> <p id="li ...

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

Utilizing Ajax to send IP addresses and obtain location data

Is there a website or webpage that can be used to input a user's IP address and receive their country or location as plain text? Below is a code snippet demonstrating how I attempted to retrieve the user's IP address: I inserted the following c ...

Failed to convert the value "hello" to an ObjectId (string type) for the _id path in the product model

i am currently using node, express, and mongoose with a local mongodb database. all of my routes are functioning correctly except for the last one /hello, which is giving me this error: { "stringValue": "\"hello\"&qu ...

I encountered an issue with my shopping cart while using ReactJS

this is the App.js file import React from "react"; import ListProduct from "./listProduct"; import ListOrder from "./listOrder"; import pizza from "./pizza.jpg"; import './style.css' import { Container,Row,Col,Button } from 'react-boo ...

Utilize various interfaces for a single object

I'm working on a Typescript project where I need to pass the same object between multiple functions with different interfaces. These are the interfaces: export interface TestModel { fileName:string, year:number, country:string } export interfac ...

JS Difficulty with Applying Underline in Contenteditable

Recently, I encountered a glitch with document.execCommand that seems puzzling. Allow me to explain the situation at hand. $("#underline-btn").click(function() { document.execCommand("underline"); }); <script src="https://ajax.googleapis.com/ajax/l ...

Typescript types for React Native's SectionList: A comprehensive guide

Currently, I am in the process of developing a React Native app using TypeScript. In order to display information in a structured manner, I decided to implement a SectionList. Following the official documentation, I have written the following code snippet: ...

Once the vue-cli has deployed to the server, the server's requested image path is now located in /dist/ folder

Issue with Image Loading: While the demo successfully loads all resources and uploads images correctly, there is an issue where an extra /dist/ is being requested for image paths, resulting in a 404 error. Demo Link: https://i.sstatic.net/XjniG.png Con ...

Interactive Thumbnail Selection for HTML5 Video

Having trouble with creating thumbnails? I managed to solve the cross-domain issue using an html2canvas PHP proxy. No error messages in the Console, but the thumbnails are unfortunately not showing up - they appear transparent or white. Here is a snippet ...

How to designate a try / catch block as asynchronous in TypeScript / JavaScript?

I am facing an issue where the code is not entering the catch block in case of an error, try { this.doSomething(); } catch (error) { console.error(error); } This problem occurs when "doSomething" returns a promise or runs asynchronous code. doSome ...