rematch-custom-hook.tsx

import React, { useEffect, FC } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import UserList from '../../components/UserList'
import { RootState, RootDispatch } from '../../store'

const useRematchDispatch = <D extends {}, MD>(selector: (dispatch: D) => MD) => {
  const dispatch = useDispatch<D>()
  return selector(dispatch)
}

const Users: FC = () => {
  const users = useSelector((state: RootState) => state.users)
  const { load } = useRematchDispatch((dispatch: RootDispatch) => ({
    load: dispatch.users.load
  }))

  useEffect(() => {
    load()
  }, [])

  return <UserList users={users} />
}

export default Users