import React , { FC , useCallback } from 'react' ; import { useSelector , useDispatch } from 'redux-with-domain' ; import module from '../index' ; import './index.css' ; interface Props { } const ReportList = props => { const reports = useSelector ( state => { return module . selectors . getReports ( state ) ; } ) ; const selectedReportId = useSelector ( state => { return module . selectors . getSelectedReportId ( state ) ; } ) ; const dispatch = useDispatch ( ) ; const changeSelectedReport = useCallback ( ( id ) => { dispatch ( module . actions . setSelectedReportId ( id ) ) ; } , [ dispatch ] ) ; return ( < div className = "reports" > { reports . map ( ( report , index ) => { return ( < div key = { index } className = { report . id === selectedReportId ? 'selected item' : 'item' } onClick = { ( ) => { changeSelectedReport ( report . id ) ; } } > { report . name } < /div>); } ) } < /div>); } ; export default ReportList ;