Type property is necessary for all actions to be identified

My issue seems to be related to the error message "Actions must have a type property". It appears that the problem lies with my RegisterSuccess action, but after searching on SO, I discovered that it could be due to how I am invoking it. I've tried some of the suggested solutions from other sources, but they haven't resolved the issue in my particular case.

Effect:

@Effect()
    register = this.actions$.pipe(
        ofType(AuthActionTypes.REGISTER),
        switchMap(action => this.auth.register(action.registration).pipe(
            map(result => ([
                { type: AuthActionTypes.REGISTER_SUCCESS, user: result }
            ])),
            catchError(result => ([
                { type: AuthActionTypes.REGISTER_FAIL }
            ])),
        ))
);

Action:

export class Register implements Action {
    readonly type = AuthActionTypes.REGISTER;
    constructor(public registration: Registration) {}
}

export class RegisterSuccess implements Action {
    readonly type = AuthActionTypes.REGISTER_SUCCESS;
    constructor(public user: User) {}
}

export class RegisterFail implements Action {
    readonly type = AuthActionTypes.REGISTER_FAIL;
    constructor() {}
}

Service:

register(user: Registration): Observable<any> {
        return this.api.post('auth/register', user).pipe(map(res => res.data));
    }

Answer №1

Your code is tailored for NgRx version 8.3.0 but your Actions are specific to NgRx version 7.4.0

"switchMap(action => this.auth.register(action.registration).pipe(" there is no need for a pipe in this line of code.

For NgRx version 8.3.0, here's the recommended approach: Action:

import { createAction, props } from '@ngrx/store';
export const register = createAction(AuthActionTypes.REGISTER());
export const registerSuccess = createAction(AuthActionTypes.REGISTER_SUCCESS, props<{user: User}>());
export const registerFail = createAction(AuthActionTypes.REGISTER_FAIL);

Effects:

@Effect()
    register = this.actions$.pipe(
        ofType(register.type),
        mergeMap(action => this.auth.register(action.registration),
        map(result => ({ type: registerSuccess.type, user: result })),
        catchError(result => ({ type: registerFail.type })),
        ))
    );

Answer №2

One way to properly handle actions in NGRX is as follows:

To start, import your action into your code:

import * as authActions from "user-auth.actions";

Next, update your effect implementation:

map(result => {
   return new authActions.RegisterSuccess(result) 
  }
),
catchError(result => ([
   of(authActions.RegisterFail)
])),

The line authActions.RegisterSuccess is crucial as it points to the appropriate class definition for this 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

Refreshing display with information received from web socket in Angular 5

On my page, I am receiving an array of data upon page load and displaying it using the *ngFor directive. Additionally, there is a connection established to a Web Socket to receive updated data, which in this case pertains to a timetable for boat trips. The ...

How can I dive into a nested array to access the properties of an object within?

My array, called sportPromise, is structured like this: 0: Array[0] 1: Array[1] 2: Array[2] 3: Array[3] When I run console.log(angular.toJson($scope.sportPromise, 'pretty'));, the output looks like this: [ [], [ { "id": 5932, ...

What is the purpose of the Angular Material dashboard schematic boilerplate code?

After utilizing an Angular schematic, specifically ng generate @angular/material:dashboard, the generated code in the component.ts file looks like this: cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( map(({ matches }) => { if (mat ...

Angular: Utilizing Parameters in HTTP GET Requests

I've recently started using Angular. Currently, I'm working on sending a parameter in an HTTP GET request. This is what my code looks like: for (var i = 0, len = this.recentArtists.topartists.artist.length; i < len && i < h ...

Streaming RTMP video through a WebView

Currently, I am working on implementing rtmp streaming using WebView. To achieve this, I referred to the code provided on Stack Overflow under this link The easiest way to play an audio RTMP stream in Android, which was shared by a user named Club. After a ...

Tips for identifying and swapping values/parameters in a URL during redirect

To provide more clarity on my inquiry, I will outline the details below: There are three links: Link A, Link B, and Link C Link A: {c_val} Link B: {id} Link C: In the database, there is a value adgaf7g6adf6gadfg8a86fgs9f6g The main focus here is when ...

Sliding multiple divs up and down with jQuery

Here is the code that I am working with: JavaScript: $(".Head").click(function () { if ($(".Body").is(":hidden")) { $(".Body").slideDown('fast'); } else { $(".Body").slideUp('fast'); } }); HTML: ...

A step-by-step guide on connecting an event listener to the search input of Mapbox GL Geocoder in a Vue application

I've encountered a challenge trying to add an event listener to the Mapbox GL Geocoder search input within a Vue application. It appears to be a straightforward task, but I'm facing difficulties. My objective is to implement a functionality simi ...

Is there a way to show output on render rather than using console.log in node.js?

I have successfully sorted the objects as shown in the link below. My next challenge is to integrate the sorted object into my render function rather than just using console.log(). I'm uncertain if converting it back into an object is the right appro ...

Is it possible for Go's http server to compile TypeScript?

My current setup involves a NodeJS Application that launches an http server and utilizes client side code written in TypeScript with Angular 2. I'm curious if it's possible to achieve the same functionality using Go programming language? I trie ...

Deploying NextJs application with Firebase's static site generation (SS

TL;DR The new data I add to my project is not displaying on the site, even though it's in the database. The issue arises after deploying with Firebase. I created a meetup website using Firebase as the backend. Everything works fine in development mo ...

Issues with NodeJS's "readline" module causing prompts not to be displayed

Recently, I decided to have some fun by creating a 'note' manager using NodeJS. However, I ran into an issue when trying to use readline.question() to prompt the user for their input on managing notes. The prompt was not being displayed as expect ...

Problem with bcrypt npm installation on Mac OS X 10.9 and Node v0.10.22

Operating System Information: Mac OS X 10.9 Node version: v0.10.22 An error occurs when attempting to install the bcrypt package. Any suggestions on how to resolve this issue? Any assistance would be highly appreciated. > [email protected] install /U ...

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

Execute iMacros Loop and terminate the process before proceeding to the next command

As a newcomer to the world of iMacro scripting, I am struggling with setting up a simple data scrape. I'm looking for guidance on how to create a loop for the following commands: URL GOTO=link1 URL GOTO=link2 URL GOTO=link3 WAIT SECONDS=7.5 Once th ...

Update the iframe URL to direct the user to a new tab instead of opening a popup

I have created the following script, but I am facing a challenge as I realize that the URL I want to use opens in a new tab instead of just forwarding: <script> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.sp ...

Having trouble with prettyphoto functionality

Seeking assistance as I am struggling to get this working Here is how I have set it up: <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/ ...

Searching for similar but not identical results using Knex.js

I am seeking a solution to retrieve similar posts without including the post itself. Here is my approach: export async function getSimilars(slug: string) { const excludeThis = await getBySlug(slug) const posts = await knex('posts') .whe ...

Having trouble locating the OBJ file in your Three.js WebGL project?

I am attempting to load an obj file using Three.js, but despite following various tutorials and resources online, I am only met with a black screen and no error messages in the console. The console output from the LoadingManager indicates that the objects ...

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

While we are familiar with pseudo-classes like :before and :after, have you ever wondered why there is no nav ul li a:left or :right? Do you think it's achievable? I'm open to using HTML5, CSS3, and JavaScript to make it happen. ...