[英]Converting React Component to Typescript?
I'm trying to copy the example of React+Redux component to typescript: https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3 我正在尝试将React + Redux组件的示例复制到打字稿: https : //medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3
I'm hitting a deadend with the function: 我正在使用这个函数击中一个deadend:
export default connect(mapStateToProps, mapDispatchToProps)(ItemList);
export default connect(mapStateToProps,mapDispatchToProps)(ItemList);
I'm getting an error about how it's not mappable to ItemList. 我收到一个关于它如何不能映射到ItemList的错误。
One way around this I believe is to change the class declaration to: 解决这个问题的一种方法我认为是将类声明更改为:
class ItemList extends React.Component<{proper component map}, {proper state map}> {
However if I do this because the props have now been mapped I cannot simply include ItemList as and am now expected to provide the params. 但是,如果我这样做是因为道具现在已被映射,我不能简单地包含ItemList,现在我希望提供params。
Another option might be to: (props as any).fetchData() however this feels wrong. 另一个选择可能是:(props as any).fetchData()但是这感觉不对。
Is there a way around this? 有没有解决的办法? Am I doing React+Redux wrong in typescript?
我在打字稿中做错了React + Redux吗?
After you create everything, you export it together with connect
. 创建完所有内容后,将其与
connect
一起导出。
interface PassedProps {
productId: number;
}
interface StateToProps {
addedProductIds: number[];
quantityById: { [key: string]: number };
quantity: number;
}
interface DispatchToProps {
addToCart: (productId: number) => void;
removeFromCart: (productId: number) => void;
}
// Needs to be added to src/store:GlobalStore interface with the correct prop name created from the name of the reducer
export interface CartState {
addedProductIds: number[];
quantityById: { [key: string]: number };
}
const mapStateToProps = (globalState: GlobalState): StateToProps => {
const state: CartState = globalState.cart;
return {
addedProductIds: state.addedProductIds,
quantityById: state.quantityById,
quantity: Object.keys(state.quantityById).reduce( (sum: number, key: string) => state.quantityById[key] + sum, 0)
};
};
const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchToProps => {
return {
addToCart: (productId: number) => dispatch({ type: 'ADD_TO_CART', productId } as AddToCartAction),
removeFromCart: (productId: number) => dispatch({ type: 'REMOVE_FROM_CART', productId } as RemoveFromCartAction),
};
}
export type Props = PassedProps & StateToProps & DispatchToProps;
class CartButton extends Component<Props, CartState> {
render() {
const { quantity } = this.props;
return (
<View>
<Text>
{ this.props.addedProductIds.length } type item is in the cart, totals to { quantity } item.
</Text>
<View>
<Button
onPress={this.onPressAdd.bind(this)}
title="Add to Cart"
color="#841584"
/>
<Button
onPress={this.onPressRemove.bind(this)}
title="Removefrom Cart"
color="#841584"
/>
</View>
</View>
);
}
onPressAdd() {
this.props.addToCart(this.props.productId);
}
onPressRemove() {
this.props.removeFromCart(this.props.productId);
}
}
export default connect<StateToProps, DispatchToProps, PassedProps>(mapStateToProps, mapDispatchToProps)(CartButton);
Then you can use it with specifying with the required props to be passed (PassedProps interface): 然后你可以使用它来指定要传递的所需道具(PassedProps接口):
import CartButton from '../components/CartButton';
// ....
render() {
return(<CartButton productId={5} />)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.