Reactjs Dynamic redux中间件typescript错误:预期类型来自属性';类型';在类型';行动';
我正在使用Typescript和react-redux,并尝试为我的API请求制作定制的动态中间件 这是我的密码:Reactjs Dynamic redux中间件typescript错误:预期类型来自属性';类型';在类型';行动';,reactjs,typescript,redux,middleware,Reactjs,Typescript,Redux,Middleware,我正在使用Typescript和react-redux,并尝试为我的API请求制作定制的动态中间件 这是我的密码: import { Dispatch } from "react"; import { errorHandler } from "../components/Layout/SnackBar/alert"; import { API } from "../_helpers/api"; import { getTheTime }
import { Dispatch } from "react";
import { errorHandler } from "../components/Layout/SnackBar/alert";
import { API } from "../_helpers/api";
import { getTheTime } from "../_helpers/constants";
import { AppActions, AppState } from "../_types";
export const BankPages = {
posts: { name: "POSTS", api: "/post/v2" },
lessons: { name: "LESSONS", api: "/lesson/v2" },
guides: { name: "GUIDES", api: "/lesson/v2/guide" },
courses: { name: "COURSES", api: "/lesson/v2/course" },
exercises: { name: "EXERCISES", api: "/lesson/v2?course=125" },
};
export const requestBank = (page: keyof typeof BankPages) => (
dispatch: Dispatch<AppActions>,
getState: () => AppState
) => {
const bankState = getState().bank[page];
const currentTime = getTheTime();
const resetTime = currentTime - bankState.nextLoad;
if (bankState.data && resetTime <= 0) {
return;
}
dispatch({ type: `REQUEST_${BankPages[page].name}` });
API.get(BankPages[page].api)
.then((res) =>
dispatch({
type: `SUCCESS_${BankPages[page].name}`,
payload: {
data: res.data,
nextLoad: getTheTime(10),
},
})
)
.catch((err) => errorHandler(err, `FAILURE_${BankPages[page].name}`));
};
一切都很完美,我知道这是因为我声明了typeof REQUEST\u POSTS
如何修复此错误?经过一些搜索,我找到了一个用于在Typescript 4.1+中使用以下函数生成动态字符串的方法:
function makeType<NS extends string, N extends string>(namespace: NS, name: N) {
return namespace + name as `${NS}${N}`
}
// should be used like this
const sampleType = makeType('REQUEST_', 'POSTS');
// return "REQUEST_POSTS"
export const BankPages = {
posts: { name: "POSTS", api: "/post/v2" } ,
lessons: { name: "LESSONS", api: "/lesson/v2" } ,
guides: { name: "GUIDES", api: "/lesson/v2/guide" } ,
courses: { name: "COURSES", api: "/lesson/v2/course" } ,
exercises: { name: "EXERCISES", api: "/lesson/v2?course=125" },
} as const;
dispatch({ type: makeType("REQUEST_", BankPages[page].name) });
当你键入BankPages.post.name
时,使用此技巧可以显示“POSTS”
而不是string
动态调度应该是这样的:
function makeType<NS extends string, N extends string>(namespace: NS, name: N) {
return namespace + name as `${NS}${N}`
}
// should be used like this
const sampleType = makeType('REQUEST_', 'POSTS');
// return "REQUEST_POSTS"
export const BankPages = {
posts: { name: "POSTS", api: "/post/v2" } ,
lessons: { name: "LESSONS", api: "/lesson/v2" } ,
guides: { name: "GUIDES", api: "/lesson/v2/guide" } ,
courses: { name: "COURSES", api: "/lesson/v2/course" } ,
exercises: { name: "EXERCISES", api: "/lesson/v2?course=125" },
} as const;
dispatch({ type: makeType("REQUEST_", BankPages[page].name) });
我觉得
typeof REQUEST\u POSTS
的界面很好。我注意到的是你如何“构建”你的类型以供分派<代码>键入:“SUCCESS_${BankPages[page]}”这在我看来是错误的,它可能不是一个有用的字符串。@伊恩,谢谢你的评论,你喜欢用哪种方式制作动态字符串?重点不是偏好BankPages[page]
不是字符串,而是对象。我不知道您是如何定义AppActions的,但它可能不需要字符串化对象。您可能想添加。name
谢谢您的帮助您可能想添加。name
我会处理它。