我正在尝试自定义 Redux Toolkit 包含的中间件以添加额外的参数。 这个额外的参数是存储库的实现。
当我配置商店时,我添加了额外的参数:
export const store = configureStore({
reducer: {
students: students,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
thunk: {
extraArgument: createAPIStudentRepository,
},
serializableCheck: false,
}),
});
createAPIStudentRepository
属于类型 StudentRepository
:
export const createAPIStudentRepository = (): StudentRepository => {
return {
loadStudents: async (query: string, page: number, limit: number) => {
const response = await fetch(API_STUDENTS_URL(query, page, limit));
const results = (await response.json()) as Student[];
return results;
},
};
};
这是
Student
存储库:
export interface StudentRepository {
loadAStudents(
query: string,
page: number,
limit: number
): Promise<Student[]>;
}
然后,在我的 Redux Thunk 中,我想使用我在配置商店时注入的
createAPIStudentRepository
:
interface StudentParams {
query?: string;
page?: number;
limit?: number;
}
export const fetchStudents = createAsyncThunk(
'student/fetch',
async (
params: StudentParams,
{ fulfillWithValue, rejectWithValue, extra }
) => {
const { query = '', page = 1, limit = 10 } = params;
try {
//TODO: here is the problem, extra() throws an error: "extra" is of type
//"unknown"
const studentRepository = extra();
const results = await studentRepository.loadAStudents(
query,
page,
limit
);
return { results, page, query };
} catch (error: unknown) {
console.log(error);
return rejectWithValue("Error: couldn't fetch Students");
}
}
);
问题出在
TODO
行。此代码有效,但我收到 Typescript
错误:"extra" is of type "unknwon"
。
有什么想法可以让
Typescript
知道类型吗?
参考:
您可以显式键入
createAsyncThunk
函数。有关详细信息,请参阅与 Typescript 一起使用:createAsyncThunk。
interface StudentParams {
query?: string;
page?: number;
limit?: number;
}
export const fetchStudents = createAsyncThunk<
// Return type
{ results: Student[], page: number, query: string },
// Argument
StudentParams,
// ThunkApi
{
extra: () => StudentRepository
}
>(
'student/fetch',
async (
params: StudentParams,
{ fulfillWithValue, rejectWithValue, extra }
) => {
const { query = '', page = 1, limit = 10 } = params;
try {
const studentRepository = extra();
const results = await studentRepository.loadAStudents(
query,
page,
limit
);
return { results, page, query };
} catch (error: unknown) {
console.log(error);
return rejectWithValue("Error: couldn't fetch Students");
}
}
);
或者您可以投射
extra
类型。我相信以下应该有效。
interface StudentParams {
query?: string;
page?: number;
limit?: number;
}
export const fetchStudents = createAsyncThunk(
'student/fetch',
async (
params: StudentParams,
{ fulfillWithValue, rejectWithValue, extra }
) => {
const { query = '', page = 1, limit = 10 } = params;
try {
const studentRepository = (extra as () => StudentRepository)();
const results = await studentRepository.loadAStudents(
query,
page,
limit
);
return { results, page, query };
} catch (error: unknown) {
console.log(error);
return rejectWithValue("Error: couldn't fetch Students");
}
}
);