import * as React from 'react' ; import { connect } from 'react-redux' ; import { Dispatch } from 'redux' ; import { updateMarkProperty } from '../../actions/markActions' ; import { State } from '../../store' ; const lookup = require ( '../../ctrl' ) . lookup ; interface StateProps { selectedId : number ; } interface DispatchProps { updateProperty : ( id : number , property : string , value : any ) => void ; } function mapStateToProps ( reduxState , ownProps ) { return { selectedId : reduxState . getIn ( [ 'inspector' , 'encodings' , 'selectedId' ] ) } ; } function mapDispatchToProps ( dispatch , ownProps ) { return { updateProperty : ( id , property , value ) => { const mark = lookup ( id ) ; if ( mark ) { mark [ property ] = value ; } dispatch ( updateMarkProperty ( { property , value } , id ) ) ; } } ; } class BaseSymbolHints extends React . Component < StateProps & DispatchProps > { public render ( ) { return ( < div > < p > I have a special template ! ! ! < /p> < /div>); } } ; export const SymbolHints = connect ( mapStateToProps , mapDispatchToProps ) ( BaseSymbolHints ) ;