大佬教程收集整理的这篇文章主要介绍了redux 中的设置类型 - 类型“从不”上不存在属性 x，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我已经在 Typescript 中设置了我的 redux store，如下所示。但是，当我尝试在 Home 组件 IDE 中使用 useSELEctor 获取火箭时，在
处引发错误const rockets = useSELEctor((state: RootStatE) => state.rocketList.rockets);
错误消息 - 类型“从不”上不存在属性“火箭”。
configureStore.tsx
import { combineReducers,createStore } from "redux";
import rocketsReducer from "./ducks/rockets";
export const rootReducer = combineReducers({
rocketList: rocketsReducer,});
const store = createStore(rootReducer);
export default store;
rockets.tsx（这遵循鸭子模式，用于动作、减速器、1 个文件中的类型）
import { IAction,IRocket } from "../../Interfaces";
const STOREROCKETS = "storeRockets";
export const storeRockets = (rockets: IAction) => ({
type: STOREROCKETS,payload: rockets,});
type RocketState = {
rockets: IRocket[]
}
const initialState: RocketState = {
rockets: [],};
export default (state:rocketState = initialState,action: IAction) => {
switch (action.typE) {
case STOREROCKETS:
return { ...state,rockets: action.payload };
default:
return state;
}
};
接口.ts
import { rootReducer } from "./redux/configureStore";
export type RootState = ReturnType<typeof rootReducer>
export interface IRockets {
rockets: IRocket[]
}
export interface IAction {
type: String
payload: { type: String,payload: object[] }
}
export interface IRocket {
ID: String
name: String
description: String
success_rate_pct: number
active: Boolean
first_flight: String
wikipedia: String
cost_per_launch: number
flickr_images: String[]
}
Home.tsx
import { RootState } from "../Interfaces";
const Home: FC = () => {
const [isLoading,setIsLoading] = useState<Boolean>(false);
const dispatch = usedispatch();
const [showError,setShowError] = useState<Boolean>(false);
const [errorText,setErrorText] = useState<String>("");
const rockets = useSELEctor((state: RootStatE) => state.rocketList.rockets);
您在操作类型的定义中有过多的对象嵌套：
export interface IAction {
type: String
payload: { type: String,payload: object[] }
}
和动作创建者：
export const storeRockets = (rockets: IAction) => ({
type: STOREROCKETS,payload: rockets,});
假设我有一组火箭：
const rockets: IRocket[] = [];
我希望像这样称呼动作创建者：
storeRockets(rockets);
得到如下结果：
{
type: "storeRockets",payload: [],}
但是，您的类型要求您必须这样称呼它：
storeRockets({
type: "sometype",payload: {
type: "otherType",payload: rockets
}
})
然后动作创建者添加另一个级别的type！所以你的实际行动是：
{
type: "storeRockets",payload: {
type: "sometype",payload: {
type: "otherType",}
}
}
这是您代码中的主要问题。
您应该将您的操作类型更改为此。它修复了嵌套问题，并且还使用了特定的对象类型 IRocket 而不是 object。
export interface IAction {
type: String;
payload: IRocket[]
}
您的动作创建者应该只执行 payload，而不是整个动作。它返回一个IAction。
export const storeRockets = (rockets: IRocket[]): IAction => ({
type: STOREROCKETS,payload: rockets
});
我建议您在 reducer 上设置显式返回类型，以便在您没有像以前那样返回预期类型时出现错误。
export default (state: RocketState = initialState,action: IAction): RocketState => {
我还建议您创建一个已经知道 useSELEctor 类型的 RootState 钩子，这样您就不必每次都声明它。
import { createSELEctorHook } from "react-redux";
export const useSELEctor = createSELEctorHook<RootState>();
以上是大佬教程为你收集整理的redux 中的设置类型 - 类型“从不”上不存在属性 x全部内容，希望文章能够帮你解决redux 中的设置类型 - 类型“从不”上不存在属性 x所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。