NgRx Effects: What am I doing Wrong?

Question

So I'm trying to dispatch different arrays of actions based on the user type that I get from the server when I make a API call to /api/auth/login.

@Effect()
  login = this.actions$.pipe(
    ofType(AuthActions.ActionTypes.TryLogin),
    map((action: AuthActions.TryLogin) => {
      return action.payload;
    }),
    switchMap(loginData => {
      return this.httpClient.post<{
        jwtToken: string;
        usertype: string;
        expiresIn: number;
        userId: string;
      }>(`${this.BACKEND_URL}/api/auth/login`, loginData);
    }),
    mergeMap(res => {
      const actions = [
        {
          type: AuthActions.ActionTypes.Login
        },
        {
          type: AuthActions.ActionTypes.SetToken,
          payload: res.jwtToken
        },
        {
          type: AuthActions.ActionTypes.SetTokenExpiry,
          payload: res.expiresIn
        }
      ];
      if (res.usertype === 'Admin') {
        this.router.navigate(['/admin-panel']);

        return [...actions, {type: AdminActions.ActionTypes.SetId, payload: res.userId}];
      } else {
        this.router.navigate(['/client-panel']);

        return [...actions, {type: UserActions.ActionTypes.SetId, payload: res.userId}];

      }
    })
  );

But I'm getting this Error:

Argument of type '(res: { jwtToken: string; usertype: string; expiresIn: number; userId: string; }) => ({ type: Act...' is not assignable to parameter of type '(value: { jwtToken: string; usertype: string; expiresIn: number; userId: string; }, index: number...'.
  Type '({ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | { type: ...' is not assignable to type 'ObservableInput<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: strin...'.
    Type '({ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | { type: ...' is not assignable to type 'ObservableInput<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: strin...'.
      Type '({ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | { type: ...' is not assignable to type 'Iterable<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | ...'.
        Types of property '[Symbol.iterator]' are incompatible.
          Type '() => IterableIterator<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload...' is not assignable to type '() => Iterator<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string...'.
            Type 'IterableIterator<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: stri...' is not assignable to type 'Iterator<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | ...'.
              Types of property 'next' are incompatible.
                Type '{ (value?: any): IteratorResult<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes...' is not assignable to type '{ (value?: any): IteratorResult<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes...'. Two different types with this name exist, but they are unrelated.
                  Type 'IteratorResult<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string...' is not assignable to type 'IteratorResult<{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string...'. Two different types with this name exist, but they are unrelated.
                    Type '{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | { type: A...' is not assignable to type '{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | { type: A...'. Two different types with this name exist, but they are unrelated.
                      Type '{ type: ActionTypes; payload: string; }' is not assignable to type '{ type: ActionTypes; payload?: undefined; } | { type: ActionTypes; payload: string; } | { type: A...'.
                        Type '{ type: ActionTypes; payload: string; }' is not assignable to type '{ type: ActionTypes; payload: string; }'. Two different types with this name exist, but they are unrelated.
                          Types of property 'type' are incompatible.
                            Type 'ActionTypes' is not assignable to type 'ActionTypes'. Two different types with this name exist, but they are unrelated.

It works alright if I separate out Admin Login and User Login. But it would mean much of the code will be identical. Can Anybody help me out here?

Answer 1

I think the only way is to type is as an Action:

if (res.usertype === 'Admin') {
        this.router.navigate(['/admin-panel']);

        return [...actions, {type: AdminActions.ActionTypes.SetId, payload: res.userId} as Action];
} else {
        this.router.navigate(['/client-panel']);

        return [...actions, {type: UserActions.ActionTypes.SetId, payload: res.userId} as Action];
}