使用Typescript和Redux Toolkit后在createAsyncThunk函数中获取"对象类型未知"

Question

我在React应用程序中使用Typescript，我也在使用Redux Toolkit进行状态管理。数据来自ExpressApi，如果我在没有Typescript的情况下实现Redux，一切都很好，但如果我使用Typescript，我会收到这个错误：

ERROR in src/features/product/productSlice.tsx:61:27
TS2571: Object is of type 'unknown'.
59 |         return data;
60 |     } catch ( error ) {
> 61 |         const message = ( error.response && error.response.data && error.response.data.message ) || error.message || error.toString();
|                           ^^^^^
62 |         return thunkAPI.rejectWithValue( message );
63 |     }
64 | } );

现在我真的是Typescript和Redux Toolkit的新手，我不知道它是如何修复的

我只是在thunk函数中发出一个get请求，以便在页面加载时获取数据。

这就是productsSlice.tsx文件的样子：

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { RootState, AppThunk } from '../../app/store';
import getAllProducts from './productService';
interface Specifications {
display: string,
processor: string,
frontCam: string,
rearCam: string,
ram: string,
storage: string,
batteryCapacity: string,
os: string;
}
interface Products {
title: string,
slug: string,
description: string,
color: string,
price: number,
image: string,
specifications: Specifications;
};
export interface Data {
success: boolean;
message: string;
data: Products[] | null;
}
interface ProductState {
products: Products[] | null,
isError: boolean;
isSuccess: boolean;
isLoading: boolean;
message: string;
}
const initialState: ProductState = {
products: null,
isError: false,
isSuccess: false,
isLoading: false,
message: ''
};
export const getProducts = createAsyncThunk( 'products/getAllProducts', async ( _, thunkAPI ) => {
try {
const data = await getAllProducts();
return data;
} catch ( error ) {
const message = ( error.response && error.response.data && error.response.data.message ) || error.message || error.toString();
return thunkAPI.rejectWithValue( message );
}
} );
export const productSlice = createSlice( {
name: 'products',
initialState,
reducers: {},
extraReducers: ( builder ) => {
builder
.addCase( getProducts.pending, ( state ) => {
state.isLoading = true;
} )
.addCase( getProducts.fulfilled, ( state, action ) => {
state.isLoading = false;
state.isSuccess = true;
state.products = action.payload.data;
} )
.addCase( getProducts.rejected, ( state, action ) => {
state.isLoading = false;
state.isError = true;
state.message = action.payload;
state.products = null;
} );
}
} );

export const getProductsSelector = ( state: RootState ) => state.products;
export default productSlice.reducer;

这是产品服务.tsx:

import axios from 'axios';
import { Data } from './productSlice';
const API_URL: string = '/api/phones';
const getAllProducts = async (): Promise<Data> => {
const response = await axios.get( API_URL );
return response.data;
};
export default getAllProducts;

这就是商店：

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import products from '../features/product/productSlice';
export const store = configureStore( {
reducer: {
products
},
} );
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>;

Answer 1

在TypeScript中，catch块中的所有内容都是unknown——毕竟，上游代码可以是throw 5、throw "foo"、throw window、throw undefined或throw new Error("message")——所以不能保证存在error.response。

如果你知道你正在期待一个类错误，并且知道这个类，你可以只做

} catch ( error ) {
if (error instanceof AxiosError) {
const message = ( error.response && error.response.data && error.response.data.message ) || error.message || error.toString();
return thunkAPI.rejectWithValue( message );
}
// unhandled non-AxiosError goes here
throw error
}