How to automatically generate typescript interfaces for redux connected components
是否可以使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | interface ComponentProps { state?: State; action?: (id: string) => void; } const mapStateToProps = (state: any) => ({ state: state, }); const mapDispatchToProps = (dispatch: any) => ({ action: (id: string) => dispatch(Action), }); const Component = (props: ComponentProps) => ...; export const ConnectedComponent = connect( mapStateToProps, mapDispatchToProps, )(Component); |
要求我将
当使用诸如materialUI及其
1 2 3 4 5 | ComponentProps extends WithStyles<typeof styles> { actualProps: any; } const ConnectedComponent = withStyles(styles)(Component); |
是否可以对
这是react-redux-typescript-guide中的操作方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import Types from 'MyTypes'; import { bindActionCreators, Dispatch } from 'redux'; import { connect } from 'react-redux'; import * as React from 'react'; import { countersActions } from '../features/counters'; // Thunk Action const incrementWithDelay = () => async (dispatch: Dispatch): Promise<void> => { setTimeout(() => dispatch(countersActions.increment()), 1000); }; const mapStateToProps = (state: Types.RootState) => ({ count: state.counters.reduxCounter, }); const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) => bindActionCreators( { onIncrement: incrementWithDelay, }, dispatch ); type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & { label: string; }; export const FCCounter: React.FC<Props> = props => { const { label, count, onIncrement } = props; const handleIncrement = () => { // Thunk action is correctly typed as promise onIncrement().then(() => { // ... }); }; return ( <span> {label}: {count} </span> <button type="button" onClick={handleIncrement}> {`Increment`} </button> ); }; export const FCCounterConnectedBindActionCreators = connect( mapStateToProps, mapDispatchToProps )(FCCounter); |
您应该使用
1 2 3 | type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> { label: string; }; |