Skip to content

Instantly share code, notes, and snippets.

@mikebridge
Created September 12, 2017 21:00
Show Gist options
  • Save mikebridge/acde0aab22b9910601bb7bff613edbfb to your computer and use it in GitHub Desktop.
Save mikebridge/acde0aab22b9910601bb7bff613edbfb to your computer and use it in GitHub Desktop.
Sharing Typescript example....
import * as React from "react";
import * as ReactRedux from "react-redux";
interface ICity {
cityName: string;
img: string;
}
// Action Creator
export const getCityInformation = () => ({
type: "GET_ALL_CITIES"
});
// HomePage Component
interface IHomePageOwnProps {
// this is empty so that react-redux can extract an empty type
}
interface IHomePageStoreProps {
allCityInformation: ICity[];
}
interface IHomePageDispatchProps {
getAllCityInformation: () => void;
}
type IHomePageProps =
IHomePageOwnProps &
IHomePageStoreProps &
IHomePageDispatchProps;
class HomePage extends React.Component<IHomePageProps> {
componentDidMount() {
this.props.getAllCityInformation();
}
render() {
return (
<div>
...
</div>
);
}
}
const mapStateToProps = (state: any, ownProps: IHomePageOwnProps): IHomePageStoreProps => ({
allCityInformation: state.cities // or wherever this is in your redux store
});
// This works
// const mapDispatchToProps = (dispatch: any, ownProps: IHomePageOwnProps): IHomePageDispatchProps => ({
// getAllCityInformation: dispatch(getCityInformation())
// });
// This doesn't
const mapDispatchToProps = {
getCityInformation
};
export default ReactRedux.connect(mapStateToProps, mapDispatchToProps)(HomePage);
@mikebridge
Copy link
Author

This gives me this error

(66,72): error TS2345: Argument of type 'typeof HomePage' is not assignable to parameter of type 'ComponentType<IHomePag
eStoreProps & { getCityInformation: () => { type: string; }; }>'.
  Type 'typeof HomePage' is not assignable to type 'StatelessComponent<IHomePageStoreProps & { getCityInformation: () =>
 { type: string; }; }>'.
    Type 'typeof HomePage' provides no match for the signature '(props: IHomePageStoreProps & { getCityInformation: () =
> { type: string; }; } & { children?: ReactNode; }, context?: any): ReactElement<any>'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment