Encountered issue: The action dispatched by Effect "n.loadInfo$" is invalid and thus resulted in an error

I'm encountering an error while trying to write an effect for an action. The error message is: "Effect "n.loadInfo$" dispatched an invalid action: null Error"

Here's my current effect implementation:

  @Effect()
  loadInfo$ = 
        this.actions.ofType(fromHeaderActions.EInfoActions.OPEN_INFO).pipe(
    withLatestFrom(
      this.store.select(fromSelectors.GetINFOPayload)),
    switchMap(([action, infoPayLoad]) => {
      let cAction: fromHeaderActions.OpenINFOWIdget = 
          <fromHeaderActions.OpenINFOWIdget>action;
      return this.infoService.loadINFO(infoPayLoad).pipe(
       // Dispatch success action
          map(response => new 
              fromHeaderActions.OpenINFOWIdgetSuccess(response)),
      catchError(error => {
        return of(new 
         fromHeaderActions.OpenINFOWIdgetFail(error.message))
      })
     )
   })
 );

This is how I've defined my action:

export class OpenINFOWIdget extends BaseGetDetailsAction implements Action {
  readonly type = EInfoActions.OPEN_INFO; 
  constructor() {
  super();   
 }
}

// Additional actions:

export class OpenINFOWIdgetSuccess extends BaseGetDetailsAction 
 implements Action {
 readonly type = EInfoHeaderActions.OPEN_INFO_SUCCESS;
 constructor(public payload: INFO) {
  super();
  }
 }

export class OpenINFOWIdget extends BaseGetDetailsAction implements Action {
  readonly type = EInfoActions.OPEN_INFO_FAIL;
  constructor(public payload: string) {
  super();    
 }
}

And in the service:

public INFOPayloadsource = new BehaviorSubject<INFO>(initINFO);
infoPayload$ = this.INFOPayloadsource.asObservable();

private SelectedInfoSource = new Subject<INFO>();
selectedInfo$ = this.SelectedInfoSource.asObservable();

  loadINFO(payload: INFO): Observable<INFO> {    
   if (payload != null) {
     this.IsInfoEnableSource.next(true);     
     this.InfoPayloadsource.next(payload);
   }
   return this.selectedInfo$;
  }

Here's the selector used in the effect:

export const GetINFOPayload = createSelector(getInfoState, 
(state: 
      InfoDetailsState) => {
        if (state) {
          if (state.infoDetails != null && 
              state.infoDetails.INFODetail != 
              null &&
              state.infoDetails.INFODetail.Active != null) {
           let payload: INFO = { ...initINFO };
           payload = state.infoDetails.INFODetail.Active;
           return payload;
        }
      }
    return null;
  });

After creating the reducer:

case 
  fromInfoDetailsHeaderActions.EInfoHeaderActions.OPEN_INFO: {
      return {
        ...state,
        IsScreenOverlay: true,
        IsEditable: false
      }
    };
    case fromInfoDetailsHeaderActions.EInfoHeaderActions.OPEN_INFO_SUCCESS: {
      return {
        ...state,
        IsScreenOverlay: false,
        IsEditable: true
      }
    };

Your assistance would be greatly appreciated. Thank you!

Answer №1

The error you are encountering is due to your effect trying to dispatch the result of this.infoService.loadINFO(), which is not recognized as a valid action.

To resolve this issue, you should transform it into a success action by using the map operator:

@Effect()
loadInfo$ = this.actions.ofType(fromHeaderActions.EInfoActions.OPEN_INFO).pipe(
withLatestFrom(
this.store.select(fromSelectors.GetINFOPayload)
),
switchMap(([action, infoPayLoad]) => {
let cAction: fromHeaderActions.OpenINFOWIdget = <fromHeaderActions.OpenINFOWIdget>action;

return this.infoService.loadINFO(infoPayLoad).pipe(
// Dispatch success action
map(response => new fromHeaderActions.OpenINFOWIdgetSuccess(response)),
catchError(error => {
return of(new fromHeaderActions.OpenINFOWIdgetFail(error.message))
})
)
})
);

Don't forget to include the corresponding action and handle it in your reducer if needed.

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

Tips for integrating Appbar and BottomNavigation in React Native Paper

The BottomNavigation is a great choice for mobile navigation, but for the web version, I have a different preference inspired by Instagram: https://i.sstatic.net/9XTlb.png Navbar.tsx: import React from 'react' import {Appbar, BottomNavigation} ...

Secret method to successfully reach a function designated within the load scope

Check out my code : <a href="javascript:void(0);" onclick="myFunction(this)">Call Function</a>​ $(window).load(function () { function myFunction(param) { console.log("called"); } }); It seems like I'm unable to access ...

Can you explain the significance of the symbol ! when declaring a variable in TypeScript?

Currently, I am delving into an Angular project and came across a peculiar line of code in the component.ts file provided by my instructor. @Input() public searchType!: string; This line resides within the OnInit() function of the component's TypeScr ...

Evaluation of HTML5 file upload functionality with unit testing

How can I perform JavaScript unit testing for file uploads using the HTML 5 File API? Let's consider the following code: <form method="POST" enctype="multipart/form-data"> <input type="file" id="fileselec ...

Submit your document using the connect-form tool

I ran into an issue while trying to upload a file using connect-form. I found that in order to successfully upload the file, I had to disable the bodyParser() function in my app.js. If I kept bodyParser() enabled, it would result in an error: loading forev ...

Tips for setting a state as the height for a div in React

I've been involved in a project that involves user input for the height and width of a div to be displayed with specific dimensions. Although the state is successfully being updated, the height of the div remains unchanged. import { useState } from & ...

I am attempting to develop a basic express application, but it doesn't appear to be functioning as expected

I am currently working on developing a straightforward express application. However, I am facing network errors when trying to access it through my browser at localhost:3000 while the application is running in the console. The root cause of this issue elud ...

How to incorporate Vue3 into Django using CDN without the need for a NodeJs bundler?

When working with Vue2, all I had to do was add the CDN and then Vue would be available in my JavaScript files. However, when trying to use Vue3, my JavaScript files are not detecting Vue. How can I troubleshoot this issue and start using Vue3 successful ...

ReactJS is struggling to showcase an image stored in the backend folder with the help of node

As a newcomer to React.js, I am facing a challenge with displaying images fetched from a database. Each action in the data has an array of images associated with it. The issue lies in not being able to properly display these images using the image tag due ...

Angular JS allows for text to be stacked on top of each other as it is seamlessly interchanged with different values

Whenever I click on either of the buttons, the text should immediately appear in a fixed position. However, currently, the text only takes its fixed position after the closing animation of the previous text finishes. Here is the code snippet: HTML <scr ...

Sharing the logger object in NodeJS projects: What's the best approach?

After setting up a logger object in the file utils/logger.js using the winston package, I am wondering how to propagate this logger object to all project files (approximately 20 in total). Do I need to include const logger = require('../utils/logger&a ...

SecurityClient is encountering a problem where the Http Error status is not being displayed

Currently, I am utilizing a custom Http client that is an extension of Angular 4's Http Client. export class SecurityClient extends Http { // ... } Within this client, there are methods designed to make calls to an API and handle a 401 status code by ...

Is it possible for TypeScript to perform union type assertion in this scenario?

Is it possible for TypeScript to perform a union type assertion in this scenario? I am trying to use ab.a, ab.b, or ab.hasOwnProperty to assert either type A or type B. How can I achieve this? export interface A extends Object { a: string; } export ...

Retrieve the highest value indexes from a three-dimensional array with JavaScript

In my dataset, I have an array structured like this: [34, 12, 56] [100,125,19] [30,50,69] The highest value in this array is 125, so the index [1,1] is returned. This means that 125, the highest value, can be found in row 1, column 1. To determine the i ...

Unable to retrieve information from a Node.js server using Angular 2

I am currently learning Angular 2 and attempting to retrieve data from a Node server using Angular 2 services. In my Angular component, I have a button. Upon clicking this button, the Angular service should send a request to the server and store the respo ...

Getting the Pesky JQuery Switcher to Actually Function

I am currently learning Jquery effects to enhance the interactivity of my websites. I have set up a practice page with the following structure: <article><a class="front-fire" href="1"></a></article> <article><a class="fron ...

How can the Flickr API be utilized with JavaScript functions?

In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...

How to Delete an Item from an Array in BehaviorSubject Using Angular/Typescript

I have encountered an issue while trying to delete a specific element from my array upon user click. Instead of removing the intended item only, it deletes all elements in the array. I attempted to use splice method on the dataService object, but I'm ...

Validator in Angular FormControl ensures that two fields have the same value or both are empty

When filling out a form with four fields, I have encountered a specific requirement. Two of the fields are mandatory, which is straightforward. However, the other two must either both be empty or both have a value - essentially resembling an XNOR logic sta ...

Using React to update the state of an array of objects

I'm faced with a challenge in changing the properties of an object within an array of objects at a specific index using a function: const handleEdit= (index) =>{ if(itemList[index].edit==true){ const copied=[...itemList]; const item2 = {...ite ...