时间戳

首页 > 解决方案 > 'X' 类型的参数不能使用 NGRX 分配给'Y' 类型的参数

angular - 'X' 类型的参数不能使用 NGRX 分配给'Y' 类型的参数

问题描述

我正在创建一个人员减速器...

但是，我们知道请求很可能会失败，这就是为什么我插入了getInitialState()一些属性，例如data,error和loading.

这data是一种能够输入特定人的值的object类型。People

如果请求中发生错误，则它error是一个object类型。RequestError

最后loading是请求的加载。

出现的错误是说RequestError接口中没有签名People接口，这很明显，因为我是使用状态作为基础的。

在此处输入图像描述

我该如何做这个实现？

错误：

var error: RequestError
Argument of type 'RequestError' is not assignable to parameter of type 'People'.
  Type 'RequestError' is missing the following properties from type 'People': id, isMain, avatar, messagests(2345)

行动：

import { createAction, props } from '@ngrx/store';
import { RequestError } from '@shared/interfaces/request.interface';
import { People } from '@shared/interfaces/people.interface';

export const GET = createAction('[GET: USER/API] Get a people');

export const CREATE = createAction('[POST: USER/API] Create a new people', props<{ data: People }>());
export const CREATE_SUCCESS = createAction('[POST: USER/API] Successfully created person', props<{ data: People }>());
export const CREATE_FAIL = createAction('[POST: USER/API] Failed to create a new person', props<{ error: RequestError }>());

export const UPDATE = createAction('[PUT: USER/API] Update a people', props<{ id: string; changes: Partial<People> }>());
export const UPDATE_SUCCESS = createAction('[PUT: USER/API] Person updated with success', props<{ id: string; changes: Partial<People> }>());
export const UPDATE_FAIL = createAction('[PUT: USER/API] Person update failed', props<{ error: RequestError }>());

减速器：

import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { Action, createReducer, on } from '@ngrx/store';
import { People } from '@shared/interfaces/people.interface';
import * as fromPeopleAction from './people.actions';

export interface State extends EntityState<People> {}

export const adapter: EntityAdapter<People> = createEntityAdapter<People>({
    selectId: (people: People) => people.id,
});

const INIT_STATE: State = adapter.getInitialState({
    data: null,
    error: null,
    loading: false,
});

const peopleReducer = createReducer(
    INIT_STATE,
    on(fromPeopleAction.CREATE, (state: State, { data }) => adapter.addOne(data, { ...state, loading: true })),
    on(fromPeopleAction.CREATE_SUCCESS, (state: State, { data }) => adapter.addOne(data, { ...state, loading: false })),
    on(fromPeopleAction.CREATE_FAIL, (state: State, { error }) => adapter.addOne(error, { ...state, loading: false }))
);

export function reducer(state: State | undefined, action: Action) {
    return peopleReducer(state, action);
}

标签： angularngrxngrx-entity

解决方案

如您的图表所示，即使您的CREATEdata操作成功，属性 from仍然为空，这意味着问题出在您的操作的道具上。由于您的类型是，当您调用该函数时，它需要来自 type 的参数。您对 State、 和 are 的属性进行建模的方式，这意味着当您想要添加或更新任何属性时，您需要将其包装在 People 类中。StateEntityAdapterPeopleadapter.addOne()PeopledataerrorloadingPeople

总之，您必须将 CREATE_FAIL 操作的道具更改为类似于：

props<{ people: { error: RequestError } }>()

或者当你打电话时adapter.addOne()，把它包起来。

如果您已经在商店中创建了人员状态并想要添加错误，您可以调用adapter.updateOne()而不是addOne().

推荐阅读