Error: received an unexpected data type

While working with ngrx/effects, I encountered an error:

ERROR: TypeError: unexpected type returned

Here's an excerpt of my code:

  this.store.dispatch({ type: CHAT_LOAD_MESSAGES, payload: chatId });

  @Effect() loadMessages$ = this.updates$
    .whenAction(CHAT_LOAD_MESSAGES)
    .map<string>(toPayload)
    .do(chatId => console.log('chatId', chatId))    // Able to successfully retrieve chatId here
    .switchMapTo(chatId => this.chatService.loadMessages(chatId))  // The error occurred in this line
    .do(res => console.log('res', res))             // This part did not execute
    .map((messages: Message[]) => ({ type: CHAT_LOAD_MESSAGES_SUCCESS, payload: messages }));

  loadMessages(chatId: string): Observable<Message[]> {
    // Currently testing with this approach.
    // Is there a mistake in this line? How do I simulate it correctly?
    return Observable.of([{ id:1, content:'Hi' });
  }

Any insights on what might be causing this issue? Thank you

Answer №1

I am grateful to @apreg for pointing out the mistake on Gitter.

It has come to my attention that I need to replace switchMapTo with switchMap.

You can find more information about switchMap and switchMapTo in the official documentation.

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

Indeed / Applying dynamic keys for validation with Formik

Attempting to validate a form with a changing number of fields can be challenging. This scenario involves receiving data from an API that dictates how many input rows are displayed. Each row requires a user input to progress, making validation crucial. Th ...

The deployment of robots.txt is not supported by Angular2 and webpack

I am currently in the process of developing a website using [email protected]. For this project, I have opted to utilize Webpack with its default settings as a dependency. Below is an excerpt from my package.json file: "dependencies": { "@angular/co ...

What could be the reason for TypeScript allowing the injection of an invalid type?

I have the following objects and classes that demonstrate dependency injection: abstract class Animal { speak(): void {}; } class Dog implements Animal { speak(): void { console.log('Woof woof'); } } class Cat implements Ani ...

The function database is not defined in firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default

Encountering an error message when attempting to connect my app to Firebase: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.database is not a function After some testing, it seems the issue only arises when trying to connect to the database. The ...

Guide for launching Electron on a local host server during development and for production builds

I have a project using Next.js + Electron + Typescript. I used the npx create-next-app --example with-electron-typescript command to generate the initial code. When I run npm run dev (which actually runs npm run build-electron && electron . ), the ...

Step-by-step guide on importing `block-ui`, `spectrum-colorpicker`, and `sass.js` libraries in a TypeScript project

I have been utilizing various plugins such as block-ui, spectrum-colorpicker, sass.js, etc., in my Angular 2 project written in TypeScript. Currently, I am loading these plugins directly in the index.html file. However, I would like to import them and onl ...

The absence of certain attributes in TypeScript

class DeploymentManager { import { observable, action, makeAutoObservable } from "mobx" public deploymentQueue = observable<IDeploymentProject>([]); public inProgressProjects = observable<IDeploymentProject>[]; public s ...

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

Lately, I've been working on creating a type library for a JavaScript written library. As I was defining all the namespaces, classes, and interfaces, I encountered an error TS2417 with some of the classes. I double-checked for any issues with method o ...

Determining the return type based on an optional generic type in TypeScript

I have created a function that generates an object (map) [key] : value from an array. My goal is to make the value method optional, and if not provided, simply return the item as it is. Here is the code I have written: export default class ArrayUtil ...

Solving the "ExpressionChangedAfterItHasBeenCheckedError" in Ionic: A Guide

//html <span style="margin-left:43%;background-color:rgb(229,229,229);border- radius:10%">&nbsp;&nbsp;{{formatEpoch(epoch)}}&nbsp;&nbsp;</span> //ts lastdate:any; formatEpoch(epoch): string { ...

Angular 6 - Resolving the Issue of 'Function calls are not supported in decorators' in Production Builds

Currently, I'm in the process of developing a cutting-edge Angular 6 application. However, as I was progressing with the development phase and tried to create a prod build using the following command: ng build --prod To my dismay, I encountered a pe ...

Is it considered poor practice in Angular to access DOM elements through the nativeElement property of ElementRef?

Instead of directly manipulating the DOM element like this: this.el.nativeElement.value = someText I prefer coding in a reactive way, even when it comes to binding events. For example, using @Viewchild to get the specific element and then binding an ev ...

Removing a directory from GitHub with the help of octokit/rest

I am attempting to utilize octokit/rest in order to programmatically remove a directory. Below is the code I am using: import {Octokit as Github} from '@octokit/rest'; const githubToken = "read from vault"; // Functions for retrieving current c ...

Typescript: defining index signatures with numerical types in the range of 1 to 3

type X = {[K in '1' | '2']: string} // valid type Y = {[K in 1 | 2]: string} // invalid https://i.sstatic.net/8iBoK.png Could there be a legitimate explanation for this inconsistency? I couldn't find any related problem on github ...

Is there a way to determine if there is history in Location.back in Angular 2 in order

I have a button that triggers Location.back(). I only want to show this button when there is history available. Is there a way to check if the location has any history, or if it can go back? Alternatively, is there a method for me to access the history my ...

Guide on deploying Angular 9 SSR app on Internet Information Services

After upgrading my Angular 7 project to Angular 9, I successfully executed the commands "ng add @nguniversal/express-engine", “npm run build:ssr" and "npm run serve:ssr” in my local environment. The deployment to IIS on the web server created a "dist" ...

Issue with mssql.connect await causing timeout in Jest

Testing some functionality in a nextjs Typescript project that needs to interact with the database directly, not relying on mocked sql query results. But encountering issues with it actually writing to the database. A brief example of the problem: /* @/li ...

Deducing data types from arrays containing both narrow and wide elements

const ElemText = { value: string }; const ElemData = { value: string, numId: number }; function combineElements( elementsText: Array<ElemText>, elementsData: Array<ElemData> ) { const combinedElements = [...elementsText, ...elementsData ...

Ways to incorporate StropheJs into Angular 8

Methods I have attempted: Method 1: Downloaded the strophejs-1.3.4.zip from Unzipped the folder, strophejs-1.3.4, and placed it in the src/assets directory of my Angular 8 project. Included the following in my index.html file: <!--// Stroph ...

Are you facing difficulties while trying to utilize useContext in your React application?

I have a basic React application where I need to implement useContext. (by the way, I am using Vite + React) Below is the code for my Context.jsx file: import React, {useContext} from 'react'; const emailContext = React.createContext(); expor ...