时间戳

首页 > 解决方案 > React/Redux reducer typescript 错误（类型“未定义”不可分配给类型 ISupplierState）

javascript - React/Redux reducer typescript 错误（类型“未定义”不可分配给类型 ISupplierState）

问题描述

即使我一直在搜索具有类似问题的各种页面，我也很长时间无法解决这个问题。

我收到以下错误：

src/app/store/instructor/supplier/reducer.tsx
TypeScript error in src/app/store/instructor/supplier/reducer.tsx(11,7):
Type '(state: ISupplierState | undefined, action: AnyAction) => { loading: true; suppliers: Supplier[]; errors?: string | undefined; } | { suppliers: any; loading: false; errors?: string | undefined; } | { ...; } | undefined' is not assignable to type 'Reducer<ISupplierState, AnyAction>'.
  Type '{ loading: true; suppliers: Supplier[]; errors?: string | undefined; } | { suppliers: any; loading: false; errors?: string | undefined; } | { loading: false; errors: any; suppliers: Supplier[]; } | undefined' is not assignable to type 'ISupplierState'.
    Type 'undefined' is not assignable to type 'ISupplierState'.  TS2322

     9 | };
    10 | 
  > 11 | const reducer: Reducer<ISupplierState> = (state = initialState, action) => {
       |       ^
    12 |   switch (action.type) {
    13 |     case ISupplierActionTypes.ISUPPLIER_FETCH: {
    14 |       return {

这是我的减速器：

export const initialState: ISupplierState = {
  suppliers: [],
  loading: false,
  errors: undefined,
};

const reducer: Reducer<ISupplierState> = (state = initialState, action) => {
  switch (action.type) {
    case ISupplierActionTypes.ISUPPLIER_FETCH: {
      return {
        ...state,
        loading: true,
      };
    }
    case ISupplierActionTypes.ISUPPLIER_SUCCESS: {
      return {
        ...state,
        suppliers: action.payload,
        loading: false,
      };
    }
    case ISupplierActionTypes.ISUPPLIER_ERROR: {
      return {
        ...state,
        loading: false,
        errors: action.payload,
      };
    }
  }
};

export { reducer as iSupplierReducer };

这是我的类型/ISupplierState：

export interface Supplier {
  name: string;
  id: number;
  payment_terms: number;
  address_id: number;
  delivery_time: number;
  bank_id: number;
  company_Type_id: number;
}

export interface ISupplier {
  suppliers: Supplier[];
}

export enum ISupplierActionTypes {
  ISUPPLIER_FETCH = '@@instructor/supplier/REQUEST',
  ISUPPLIER_SUCCESS = '@@instructor/supplier/SUCCESS',
  ISUPPLIER_ERROR = '@@instructor/supplier/ERROR',
}

export interface ISupplierState {
  readonly loading: boolean;
  readonly suppliers: Supplier[];
  readonly errors?: string;
}

我理解错误代码，但我可以在另一个减速器上执行非常类似的方法，而不会出现任何问题。所以我不明白为什么这会导致这么多问题。

我正在使用Redux 7.2.0 任何帮助将不胜感激:) 提前谢谢你。

标签： javascriptreactjstypescriptreduxtypes

解决方案

我很抱歉。我忘了给我的开关添加一个默认返回。所以如果你遇到类似的问题，记得检查你的开关！

添加以下行解决了它。

default: {
    return state;
}

推荐阅读