Invalid action has been dispatched by the effect:

In my project, I am using Angular 7.1.4.

This is an excerpt from my effect code:


                    @Injectable()
                    export class LoginEffects {
                        constructor(private actions$: Actions, private authService: AuthenticationService) {}

                        @Effect({dispatch: true})
                            loginRequest$: Observable<any> = this.actions$.pipe(
                                ofType(LoginActionsType.LOGIN_REQUEST),
                                exhaustMap(payload => {
                                    console.log(payload);
                                    return this.authService.login(payload.user, payload.password)
                                        .pipe(
                                            map(user => new LoginSuccessAction(user)),
                                            catchError(err => of(new LogOutAction(err)))
                                        );
                                })
                            );
                        } 
                
            

I encountered the following error: ERROR Error: Effect "LoginEffects.loginRequest$" dispatched an invalid action.

If I include {dispatch: false} in the @Effect decorator, the error disappears.

Furthermore, attempting to access payload properties results in TypeScript errors.

https://i.sstatic.net/dHqIN.png

Answer №1

In order to properly identify actions, it is essential for them to have a type property. Upon reviewing the error log, it appears that your action lacks this property and only consists of a payload. Ensure that both LoginSuccessAction and LogOutAction include a readonly type property. Here is an example:

class LoginSuccessAction extends Action {
  readonly type = "LOGIN_SUCCESS";
}

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

Problem with Material UI Checkbox failing to switch states

I'm a bit confused about the functionality of my checkbox in Material UI. The documentation makes it seem simple, but I'm struggling to get my checkbox to toggle on or off after creating the component. const createCheckBox = (row, checkBoxStatus, ...

Is it feasible to have two interfaces in Typescript that reference each other?

I am facing an issue with two interfaces, UserProfile and Interest. Here is the code for both interfaces: export default interface UserProfile { userProfileId: string, rep: number, pfpUrl: string, bio: string, experience: "beginner" | " ...

Node JS encountered an unhandled promise rejection warning, while React received a preflight response

Working with React JS: Take a look at the code snippet below: ....some code...... verifyTokenResults = await axios.post('http://localhost:5000/otp/token/verify', {accessToken: authToken}) Here, I am sending a token from a React component to a ...

Is there a method to initiate a 'simple' action when dispatching an action in ngrx?

Here's the scenario I'm facing: When any of the actions listed below are dispatched, I need to update the saving property in the reducer to true. However, currently, I am not handling these actions in the reducer; instead, I handle them in my ef ...

Tips for sharing a React component with CSS modules that is compatible with both ES Modules and CommonJs for CSS modules integration

Some frameworks, like Gatsby version 3 and above, import CSS modules as ES modules by default: import { class1, class2 } from 'styles.modules.css' // or import * as styles from 'styles.modules.css' However, other projects, such as Crea ...

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

Error display in Elastic Apm Rum Angular implementation

Having some issues with incorporating the @elastic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5948598d8878098d8949b9280999487b5c7dbc4dbc4">[email protected]</a> package into my project. Angular is throwing console ...

What is the best way to incorporate a counter into my JavaScript game?

I've created this JavaScript game: window.onload = function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d"); document.addEventListener("keydown", keyPush); setInterval(game, 1000 / 7); } px = py = 10; gs = tc ...

Using handleSubmit as an asynchronous function triggers an error because createUser is not a defined function in this context

I've been working on implementing user Authentication, login, and signup features. Everything was going smoothly until I encountered an issue while trying to sign up - it kept saying that createUser is not a function. SignUp Component code snippet wit ...

Is the page reloading automatically after updating the innerHTML content?

Trying my hand at creating a JavaScript/HTML page that automatically generates an audio player when provided with a URL. However, every time I click the generated button, the audio player is inserted but then disappears as if the page is refreshing. Here ...

Issue with OnChange Not Triggering

Why isn't the onchange property firing when typing in my textbox? Check out the code below: VB.NET Dim textBoxUrlYoutube As New TextBox divUrlTextBoxContainer.Controls.Add(textBoxUrlYoutube) textBoxUrlYoutube.CssClass = "textboxyo ...

Bringing together a collection of objects connected by shared array elements

Given the types defined as: type A = { commonKey: { a: string }[] }; type B = { commonKey: { b: number }[] }; Is it possible to create the type below without explicitly specifying commonKey? type C = { commonKey: { a: string, b: number }[] } My initial a ...

Sending data to the server using the $.post method with an

I am having some trouble creating a post using a customized model: public class CallbackPriorityItemModel { public int userID { get; set; } public int order { get; set; } public string name { get; set; } } Unfortunately, I can't seem to ...

Persistent button positioned at the bottom of the page, remaining visible even when scrolling to the very end of the content

I am looking to add a floating button that remains in the same position relative to the content until the window is scrolled to a certain point, after which it sticks to the end of the content. In simple terms, I want the element to act as 'relative& ...

The integration between AngularJS and PHP using POST method fails to work properly

I am having trouble with sending and receiving data from PHP on my server, as it seems that the data is not being sent successfully. This is my JavaScript code: angular .module('h2hApp', []) .controller('mainCtrl', ['$sco ...

Experiencing issues in retrieving data post-login using ASP.net session key method

I have developed a website using AngularJS for the front-end and Windows webforms for the back-end. I believe that the Authorization process is carried out using ASP.net Session Key. The approach involves creating an AngularJS Post method for "login" foll ...

Searching and selecting columns in React using Material-UI

Currently, I am using Material-UI data tables and have implemented a search functionality similar to this Codesandbox example, which only searches the Name/Food column. This is my existing code snippet: const [filterFn, setFilterFn] = useState({ fn: items ...

Running the npm build command generates JavaScript that is not compatible with Internet Explorer

After executing npm run build, the generated JavaScript code looks like this: jQuery.extend({ propFix: { for: "htmlFor", class: "className" }, Unfortunately, this format is not compatible with several versions of Internet Explorer ...

The type '{ status: boolean; image: null; price: number; }[]' does not include all the properties required by the 'SelectedCustomImageType' type

While developing my Next.js 14 TypeScript application, I encountered the following error: Error in type checking: Type '{ status: boolean; image: null; price: number; }[]' is missing the properties 'status', 'image', and &apos ...

Is it possible to send an ajax request to a user control file with the extension .ascx?

I am trying to interact with a user control on my page through ajax. Is it possible to make an ajax request directly to the user control (.ascx) instead of .aspx or .ashx files? ...