Skip to content

Instantly share code, notes, and snippets.

@junibrosas
Last active March 26, 2019 10:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save junibrosas/f2e5bfde7938675f320ad758b4931f47 to your computer and use it in GitHub Desktop.
Save junibrosas/f2e5bfde7938675f320ad758b4931f47 to your computer and use it in GitHub Desktop.
Proper typings of react-redux connected components
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