Wrong action type or wrong reducer is getting called in Angular 10 & RxJs

Question

I have created two states using RxJs in angular 10 application. The problem I am facing is Wrong action type or the wrong reducer is getting called.

I have explained the issue in the image below.

I am not sure which part of the code I should provide. So I am just providing my actions. If I need to provide other codes let me know. I am new in RxJs or redux. I guess i have made basic mistakes.

Draw List Action

import {Action} from '@ngrx/store'
import {Draw} from "../../../models/Draw";

export const GET_LIVE_DRAWS = '[GET_LIVE_DRAWS] Try get'
export const GET_LIVE_DRAWS_SUCCESS = '[GET_LIVE_DRAWS] Success'
export const GET_LIVE_DRAWS_FAIL = '[GET_LIVE_DRAWS] failure'



export class GetLiveDraws implements Action {
  readonly type = GET_LIVE_DRAWS

  constructor() {
  }
}

export class GetLiveDrawsSuccess implements Action {
  readonly type = GET_LIVE_DRAWS_SUCCESS

  constructor(data: Draw[]) {
  }
}

export class GetLiveDrawsFailure implements Action {
  readonly type = GET_LIVE_DRAWS_FAIL

  constructor(public data: any) {
  }
}


export type Actions = GetLiveDraws | GetLiveDrawsSuccess | GetLiveDrawsFailure

Auth Action

import {Action} from '@ngrx/store'
import {User} from "../../../models/User";
import {Keys} from "../../../config/keys";

export const AUTHENTICATE = '[Auth] Try Login'
export const AUTHENTICATION_SUCCESS = '[Auth] Success'
export const AUTHENTICATION_FAIL = '[Auth] failure'

export const LOGOUT = '[Auth] Try LOGOUT'
export const LOGOUT_SUCCESS = '[Auth] LOGOUT Success'
export const LOGOUT_FAIL = '[Auth] LOGOUT failure'


export class Authenticate implements Action {
  readonly type = AUTHENTICATE

  constructor(public username: string, public password: string) {
  }
}

export class AuthenticationSuccess implements Action {
  readonly type = AUTHENTICATION_SUCCESS

  constructor(public data: User) {
    localStorage.setItem(Keys.USER_KEY, JSON.stringify(data))
    localStorage.setItem(Keys.ACCESS_TOKEN, data.access_token)
  }
}

export class AuthenticationFailure implements Action {
  readonly type = AUTHENTICATION_FAIL

  constructor(public data: any) {
    localStorage.removeItem(Keys.USER_KEY);
    localStorage.removeItem(Keys.ACCESS_TOKEN);
  }
}

/// Logout

export class Logout implements Action {
  readonly type = LOGOUT

  constructor(public id: number) {
  }
}

export class LogoutSuccess implements Action {
  readonly type = LOGOUT_SUCCESS

  constructor() {
    localStorage.removeItem(Keys.ACCESS_TOKEN);
    localStorage.removeItem(Keys.USER_KEY);
  }
}

export class LogoutFailure implements Action {
  readonly type = LOGOUT_FAIL

  constructor() {
    localStorage.removeItem(Keys.USER_KEY);
    localStorage.removeItem(Keys.ACCESS_TOKEN);
  }
}


export type Actions = Authenticate | AuthenticationSuccess | AuthenticationFailure |
  Logout | LogoutSuccess | LogoutFailure

Answer 1

From the Looks of it, you have an action that is being listened to by 2 different reducers. Remember that an action is broadcast, and any/all reducers could listen for it if you set them up to do so. This can be useful if you need to update two slices of state from the result of 1 action, but it can make your code a bit more complex, and tie different parts of your state together