import { FC , useEffect , memo } from "react" ; import { RouteComponentProps } from "react-router-dom" ; import { useDispatch , useSelector , shallowEqual } from "react-redux" ; import { Helmet } from "react-helmet" ; import { AppState , AppThunk } from "../../store" ; import { fetchUserListIfNeed } from "../../store/userList" ; import { List } from "../../components" ; import styles from "./styles.module.scss" ; export type Props = RouteComponentProps ; const Home = ( ) : JSX . Element => { const dispatch = useDispatch ( ) ; const { readyStatus , items } = useSelector ( ( { userList } ) => userList , shallowEqual ) ; useEffect ( ( ) => { dispatch ( fetchUserListIfNeed ( ) ) ; } , [ dispatch ] ) ; const renderList = ( ) => { if ( ! readyStatus || readyStatus === "invalid" || readyStatus === "request" ) return < p > Loading ... < /p>; if ( readyStatus === "failure" ) return < p > Oops , Failed to load list ! < /p>; return < List items = { items } />; } ; return ( < div className = { styles . Home } > < Helmet title = "Home" / > { renderList ( ) } < /div>); } ; export const loadData = ( ) : AppThunk [ ] => [ fetchUserListIfNeed ( ) , ] ; export default memo ( Home ) ;