Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save adrianolsk/da5c62b35b4d862ece8f9d61721453b7 to your computer and use it in GitHub Desktop.
Save adrianolsk/da5c62b35b4d862ece8f9d61721453b7 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