Type User[] has no properties in common with type 'User' ngrx angular

Question

I am trying to get user data using ngrx. Below is related code:

user.actions.ts:

import { Action } from '@ngrx/store';
import { User } from 'src/app/api/models/user';

export enum UserActionTypes {
    LOAD_USER = "[User] Load Pfas",
    LOAD_USER_SUCCESS = "[User] Load Pfas Success",
    LOAD_USER_FAIL = "[User] Load Pfas Fail",
}

export class LoadUser implements Action {
    readonly type = UserActionTypes.LOAD_USER
}

export class LoadUserSuccess implements Action {
    readonly type = UserActionTypes.LOAD_USER_SUCCESS
    constructor(public payload: User[]) {}
}

export class LoadUserFail implements Action {
    readonly type = UserActionTypes.LOAD_USER_FAIL
    constructor(public payload: string) {}
}

export type Action = LoadUser | LoadUserSuccess | LoadUserFail;

user.effects.ts:

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';

import * as UserActions from './user.actions';
import { UserService } from 'src/app/api/services/user.service';
import { User } from 'src/app/api/models/user';
import { Pfa } from '../../shared/pfa.module';

@Injectable()
export class UserEffect {
    constructor( private action$: Actions, private userService: UserService ) {}

    @Effect()
    loadUser$: Observable<Action> = this.action$.pipe ( ofType<UserActions.LoadUser>(UserActions.UserActionTypes.LOAD_USER), mergeMap((actions: UserActions.LoadUser) => this.userService.ApiUsersValidateGet().pipe( map( (u: User[]) => new UserActions.LoadUserSuccess(u) ) --<here getting an error,
    catchError(err => of(new UserActions.LoadUserFail(err))) ) ) )
}

user.reducers.ts:

import * as userActions from '../user/user.actions';
import * as fromRoot from '../../../app-states/app.state';
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { User } from 'src/app/api/models/user';

export interface UserState {
    user: User[],
    loading: boolean,
    loaded: boolean,
    error: string
}

export interface AppState extends fromRoot.AppState {
    user: UserState
}

export const initialState: UserState = {
    user: [],
    loading: false,
    loaded: false,
    error: ""
}

export function userReducer ( state = initialState, action: userActions.Action ):
UserState {
    switch(action.type) {
        case userActions.UserActionTypes.LOAD_USER: {
            return {
                ...state,
                loading: true
            }
        }
        case userActions.UserActionTypes.LOAD_USER_SUCCESS: {
            return {
                ...state,
                loading: false,
                loaded: true,
                user: action.payload
            }
        }
        case userActions.UserActionTypes.LOAD_USER_FAIL: {
            return {
                ...state,
                user: [],
                loading: false,
                loaded: false,
                error: action.payload
            }
        }
        default: {
            return state
        }
    }
}

const getUserFeatureState = createFeatureSelector<UserState>("user");

export const getUser = createSelector(
    getUserFeatureState,
    (state: UserState) => state.user
);

export const getUserLoading = createSelector(
    getUserFeatureState,
    (state: UserState) => state.loading
);

export const getUserLoaded = createSelector(
    getUserFeatureState,
    (state: UserState) => state.loaded
);

export const getError = createSelector(
    getUserFeatureState,
    (state: UserState) => state.error
);

I am getting below error in user.effects.ts file:

Argument of type 'OperatorFunction' is not assignable to parameter of type 'OperatorFunction'. Type 'User[]' has no properties in common with type 'User'

Answer 1

I think the error is here:

map( (u: User[]) => new UserActions.LoadUserSuccess(u)

If you use map(), you iterate through the data set. That means that within your map() function you have only one user as argument.

Try this:

tap( (u: User[]) => new UserActions.LoadUserSuccess(u)