importReact,{useEffect}from'react';importGridfrom'@material-ui/core/Grid';import{GridSpacing}from'@material-ui/core/Grid';importCoursefrom'../../components/Course/Course';import{CourseasCourseModel}from'../../redux/features/course/model';typeProps={courses:CourseModel[];onFetchCourseRequest: ???// I want to bind this to the fetch courses action but do not understand how?? what type should this be??};exportconstCourseList:React.FC<Props>=props=>{const{ courses, onFetchCourseRequest}=props;// functional equivalent of componentDidMount// this only gets triggered once, since// dependency list is empty// I want this to to trigger the dispatch of a FETCH_COURSE_LIST action and bind to resulting FETCH_COURSE_LIST// I do not understand how to do this from examples....useEffect(()=>{onFetchCourseRequest();},[]);return(<divstyle={{marginTop:20,padding:30}}>{<Gridcontainerspacing={2asGridSpacing}justify="center">{courses.map(element=>(<Griditemkey={element.courseID}><Coursecourse={element}/></Grid>))}</Grid>}</div>);};

import{RootState}from'ReduxTypes';import{connect}from'react-redux';import{CourseList}from'./CourseList';import{courseActions,courseSelectors}from'../../redux/features/course';constmapDispatchToProps={onFetchCoursesRequest:courseActions.fetchCoursesRequest,};constmapStateToProps=(state:RootState)=>({courses:courseSelectors.getReduxCourses(state.courses.fetchCoursesSuccess),});constCourseListConnected=connect(mapStateToProps,mapDispatchToProps,)(CourseList);exportdefaultCourseListConnected;

import{RootAction,RootState,Services}from'ReduxTypes';import{Epic}from'redux-observable';import{isOfType}from'typesafe-actions';import{of}from'rxjs';import{catchError,filter,ignoreElements,map,switchMap,}from'rxjs/operators';import{fetchCoursesFail,fetchCoursesSuccess}from'./actions';importconstantsfrom'./constants';exportconstfetchCoursesRequestAction:Epic<RootAction,RootAction,RootState,Services>=(action$,state$,{ courseServices})=>action$.pipe(filter(isOfType(constants.FETCH_COURSES_REQUEST)),switchMap(action=>courseServices.default.getCourses().pipe(map(courses=>fetchCoursesSuccess(courses)),catchError(error=>of(fetchCoursesFail(error))),),),ignoreElements(),// ignore everything except complete and error, template does this);