Skip to content

Instantly share code, notes, and snippets.

@aheitzmann
Last active September 30, 2021 06:14
Show Gist options
  • Save aheitzmann/8959cea7a56303189082b488780a7702 to your computer and use it in GitHub Desktop.
Save aheitzmann/8959cea7a56303189082b488780a7702 to your computer and use it in GitHub Desktop.
A best practice pattern for defining and using typescript types for a redux-react connected component
import * as React from 'react'
import * as Redux from 'redux'
import { MyReduxState } from './my-root-reducer.ts'
export interface OwnProps {
propFromParent: number
}
interface StateProps {
propFromReduxStore: string
}
interface DispatchProps {
onSomeEvent: () => void
}
type Props = StateProps & DispatchProps & OwnProps
interface State {
internalComponentStateField: string
}
class MyComponent extends React.Component<Props, State> {
...
}
function mapStateToProps(state: MyReduxState, ownProps: OwnProps): StateProps {
...
}
function mapDispatchToProps(dispatch: Redux.Dispatch<any>, ownProps: OwnProps): DispatchProps {
...
}
export default connect<StateProps, DispatchProps, OwnProps>
(mapStateToProps, mapDispatchToProps)(MyComponent)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment