Question

我正在尝试使用ngrx获取用户数据。下面是相关代码：

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
);

我在user.effects.ts文件中遇到以下错误：

“ OperatorFunction”类型的参数不是可分配给“ OperatorFunction”类型的参数。类型'User []'与以下属性没有共同点输入“用户”

Answer 1

我认为错误在这里：

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

如果使用map()，则会遍历数据集。这意味着在map()函数中，只有一个用户作为参数。

尝试一下：

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

User []类型与“ User”类型ngrx angular没有共同的属性

1 个答案: