React Native 如何在typescript中为()=>dispatch(action)设置类型?

ddrv8njm  于 2022-12-04  发布在  React
关注(0)|答案(2)|浏览(173)

我是一个新的typescript和转换我的jsx到tsx文件。我如何定义一个redux调度为我的onPress属性的类型?我尝试使用“函数”和“AppDispatch”。提前感谢

import { AppDispatch } from "../redux/store"

interface ItemProps {
    item: Custom_date, 
    onPress: AppDispatch, //What should I put here?
    backgroundColor: any,
    textColor: any
}

const Item = ({ item, onPress, backgroundColor, textColor }: ItemProps) => (
    <TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
        <Text style={[styles.dateTitle, textColor]}>{item.title}</Text>
    </TouchableOpacity>
);

export const DateHeader = () => {
    const { date } = useSelector((store: RootState) => store.nutrition)
    const dispatch = useDispatch()
    const renderItem = ({ item }) => {
        const backgroundColor = item.id === date.id ? "#033F40" : "#BDF0CC";
        const color = item.id === date.id ? '#BDF0CC' : '#033F40';

        return (
            <Item
                item={item}
                onPress={() => dispatch(setDate(item))}
                backgroundColor={{ backgroundColor }}
                textColor={{ color }}
            />
        );
    }

    return (<>
        <FlatList {props} />
    </>)
}
uurity8g

uurity8g1#

你只需要知道一个函数的参数类型和返回类型。为了找到dispatch()的返回类型,你可以检查useDispatch()的内部结构,但是作为一般规则(除了一些例外)点击处理程序不会返回任何东西。2函数产生的任何副作用,比如更新变量、调用API或更新数据库,不会包含在型别签章中。
onPress中也没有传入任何参数,这可以从定义箭头函数的空括号中看出,这大大简化了事情。
因此,如果调用的调度函数没有返回值,onPress的类型很可能如下所示:

interface ItemProps {
    item: Custom_date, 
    onPress: () => void,
    backgroundColor: any,
    textColor: any
}
pw9qyyiw

pw9qyyiw2#

您应该使用应用中正在使用的调度函数的类型,它很可能是Redux商店中的AppDispatch:

interface ItemProps {
    item: Custom_date, 
    onPress: AppDispatch, 
    backgroundColor: any,
    textColor: any
}

相关问题