https://stackblitz.com/edit/react-ts-rkekhf?file=app/redux/asyncThunkFromFetch.ts
我们使用以下助手来创建thunk:
import { createAsyncThunk } from '@reduxjs/toolkit';
import axios, { AxiosPromise, AxiosResponse } from 'axios';
import { store } from './store';
export const createAsyncThunkFromAPI = <ResponseSchema, RequestParams>(
typePrefix: string,
apiFunction: ApiFunction<RequestParams, ResponseSchema>
) => {
return createAsyncThunk<ResponseSchema, RequestParams>(
typePrefix,
async (args, thunkApi) => {
try {
const response = await apiFunction(args);
return response.data;
} catch (e) {
return thunkApi.rejectWithValue(e);
}
}
);
};
type ApiFunction<RequestParams, ResponseSchema> = (
axiosParams: RequestParams
) => AxiosPromise<ResponseSchema>;
export const getMobileOperatorsAPI = (): Promise<AxiosResponse<string[]>> => {
return axios.get('https://api.com');
};
export default createAsyncThunkFromAPI;
const sliceName = 'mobile-operators';
export const fetchMobileOperators = createAsyncThunkFromAPI(
`${sliceName}/fetchMobileOperators`,
getMobileOperatorsAPI
);
store.dispatch(fetchMobileOperators()); //Expected 1 arguments, but got 0.ts(2554)
store.dispatch(fetchMobileOperators({})); //Ouch!!!
有一点我很讨厌,那就是不能给helper创建的thunk函数传递零个参数,但是在我们的例子中,使用它比使用@redux/toolkit
中的createAsyncThunk
更方便
我尝试为有效载荷创建者设置一个默认参数,但没有成功。但是我真的不明白我在这里做什么。
如何调整createAsyncThunkFromAPI
以从API函数推断args
?
同样的理念,如何以恰当的方式贯彻?
我错过了什么知识才能自己解决这个问题?
1条答案
按热度按时间8ljdwjyq1#
∮ ∮ ∮ ∮ ∮一个月一个月
你已经很接近了,只是错过了一个很小的东西。你的thunk工厂将通过查看
apiFunction
的类型来推断泛型ResponseSchema
和RequestParams
的类型。这个特定的apiFunction
没有参数,所以RequestParams
被推断为unknown
。我们希望确保它被推断为never
。因此我们添加了一个默认值RequestParams = never
,这意味着当RequestParams
不能被推断时,args
将不被接受。进行此更改后,所需的用法没有错误,而您的变通解决方案 * 确实 * 有错误。
还有最后一件事要检查,那就是确保当有一个必需的参数时,它仍然能正常工作。我added an additional example,它确实能正常工作。当参数丢失时,我们会得到一个错误,当提供了一个参数时,我们不会得到任何错误。