Search code examples
javascriptangulartypescriptreduxngrx

store dispatch actions is not a Constructor in Angular


I am using ngrx for storing data. I am getting below error while calling action?

_global_store_actions_auth_actions__WEBPACK_IMPORTED_MODULE_9__.SetAuthTokenRequest is not a constructor

myCompoment.ts

import * as AuthActions from "../../global/store/actions/auth.actions";
import { Token } from "../../global/models";

const tk: Token = {
      access_token: "string",
    };
this.store.dispatch(new AuthActions.SetAuthTokenRequest(tk));

actions.ts

import { Action } from "@ngrx/store";
import { Token } from "../../models/token";

export declare enum AuthActionTypes {

SET_AUTH_TOKEN_REQUEST = "[Core] SET_AUTH_TOKEN_REQUEST",

export interface AuthenticationData {
  user: string;
  password: string;
}
export declare class SetAuthTokenRequest implements Action {
  payload: Token;
  readonly type = AuthActionTypes.SET_AUTH_TOKEN_REQUEST;
  constructor(payload: Token);
}

reducer.ts

import { Token } from "../../models";
import { AuthAction, AuthActionTypes } from "../actions";

export interface AuthState {
  token: Token;
  unverifiedUserToken: Token;
}

const initialValue: AuthState = {
  token: null,
  unverifiedUserToken: null
};

export function auth(state = initialValue, action: AuthAction): AuthState {
  switch (action.type) {
    case AuthActionTypes.SET_AUTH_TOKEN_REQUEST:
      return {
        ...state,
        token: action.payload
      };
    default:
      return state;
  }
}

Solution

  • This is wrong

    export declare class SetAuthTokenRequest implements Action {
      payload: Token;
      readonly type = AuthActionTypes.SET_AUTH_TOKEN_REQUEST;
      constructor(payload: Token);
    }
    

    You need to change like this

       export class SetAuthTokenRequest implements Action {
          public readonly type = AuthActionTypes.SET_AUTH_TOKEN_REQUEST;
          constructor(public readonly payload: Token);
        }
    

    You can view my code here