我正在try 定制Redux工具包附带的中间件,以增加额外的参数. 这个额外的参数是存储库的实现.
当我配置存储时,我添加了额外的参数:
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中,我想使用我在配置store 时注入的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
知道是哪种类型吗?
参考: