gpt4 book ai didi

javascript - Redux 操作 typescript 返回类型不起作用

转载 作者:行者123 更新时间:2023-12-03 14:16:26 25 4
gpt4 key购买 nike

所以基本上我试图返回一组函数的类型并能够在我的 redux reducer 中匹配它。

这是我的尝试:

Action .ts

export const SET_CART_ITEMS = "SET_CART_ITEMS";
export const SET_CART_TOTALS = "SET_CART_TOTALS";

export const ADD_CART_ITEM = "ADD_CART_ITEM";
export const REMOVE_CART_ITEM = "REMOVE_CART_ITEM";

export const SET_CART_LOADING = "SET_CART_LOADING";

export function setCart(cart: Cart) {
return {
type: SET_CART_ITEMS,
cart
} as const;
}

export function setTotals(totals: CartTotal) {
return {
type: SET_CART_TOTALS,
totals
}
}

export function addCartItem(cart: Cart) {
return {
type: ADD_CART_ITEM,
cart
} as const;
}

export function removeCartItem(cart: Cart) {
return {
type: REMOVE_CART_ITEM,
cart
} as const;
}

export function toggleCartLoading(loading: boolean) {
return {
type: SET_CART_LOADING,
loading
} as const;
}

export type CartActions = ReturnType<typeof setCart>| ReturnType<typeof addCartItem> | ReturnType<typeof removeCartItem> | ReturnType<typeof toggleCartLoading> | ReturnType<typeof setTotals>

reducer .ts

import { 
CartActions,
ADD_CART_ITEM,
REMOVE_CART_ITEM,
SET_CART_ITEMS,
SET_CART_TOTALS,
SET_CART_LOADING
} from '../../../actions';

export default (state: CartState = initialState, action: CartActions) : CartState => {
switch (action.type) {
case ADD_CART_ITEM:
return {
...state,
cart: {
...action.cart
}
}
case REMOVE_CART_ITEM:
return {
...state,
cart: {
...action.cart
}
}
case SET_CART_ITEMS:
return {
...state,
cart: action.cart
}
case SET_CART_TOTALS:
return {
...state,
totals: action.totals
}
case SET_CART_LOADING:
return {
...state,
loading: action.loading
}
default:
break;
}
return state;
}

这根本不起作用,我收到的错误是在 reducer 开关中说:

"Property 'cart' does not exist on type 'CartActions'.
Property 'cart' does not exist on type '{ type: string; totals: CartTotal; }'."


Property 'loading' does not exist on type '{ readonly type: "SET_CART_ITEMS"; readonly cart: Record<string, CartItem>; } | { readonly type: "ADD_CART_ITEM"; readonly cart: Record<string, CartItem>; } | { ...; } | { ...; } | { ...; }'.
Property 'loading' does not exist on type '{ readonly type: "SET_CART_ITEMS"; readonly cart: Record<string, CartItem>; }'.ts(2339)

我是否遗漏了一些明显的东西?我真的希望不需要通过界面手动输入所有操作。

灵感来自 https://gist.github.com/schettino/c8bf5062ef99993ce32514807ffae849

最佳答案

每个 Action 创建者返回类型都必须用as const注释,以便TS可以在reducer的switch语句中区分您的 Action 。

setTotals 中,这个 const 断言似乎丢失了 - 至少提供的代码在 playground 中再次工作。 ,添加后。

您可以创建一个通用操作创建器以使其更具可扩展性并省略 as const:

function createAction<T extends string, U, K extends string>(type: T, key: K, payload: U) {
return ({
type,
[key]: payload
}) as { type: T; } & { [P in K]: U }
// need to cast, so TS doesn't return a widened index signature type
}

export function setTotals(totals: CartTotal) {
return createAction(SET_CART_TOTALS, "totals", totals)
}
// same with the other functions

Code sample in Playground

关于javascript - Redux 操作 typescript 返回类型不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59896448/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com