axios Redux createAsyncThunkFromAPI Package 器问题

yvgpqqbh  于 2023-03-02  发布在  iOS
关注(0)|答案(1)|浏览(145)

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
同样的理念,如何以恰当的方式贯彻?
我错过了什么知识才能自己解决这个问题?

8ljdwjyq

8ljdwjyq1#

∮ ∮ ∮ ∮ ∮一个月一个月
你已经很接近了,只是错过了一个很小的东西。你的thunk工厂将通过查看apiFunction的类型来推断泛型ResponseSchemaRequestParams的类型。这个特定的apiFunction没有参数,所以RequestParams被推断为unknown。我们希望确保它被推断为never。因此我们添加了一个默认值RequestParams = never,这意味着当RequestParams不能被推断时,args将不被接受。

export const createAsyncThunkFromAPI = <ResponseSchema, RequestParams = never>(

进行此更改后,所需的用法没有错误,而您的变通解决方案 * 确实 * 有错误。

store.dispatch(fetchMobileOperators()); // okay!
store.dispatch(fetchMobileOperators({})); // Expected 0 arguments, but got 1.(2554)

还有最后一件事要检查,那就是确保当有一个必需的参数时,它仍然能正常工作。我added an additional example,它确实能正常工作。当参数丢失时,我们会得到一个错误,当提供了一个参数时,我们不会得到任何错误。

相关问题