Рефакторинг для Redux / React

Question

Последние несколько месяцев я работаю над небольшим проектом, который включает использование функциональных компонентов и хуков для вызова API, извлечения некоторых данных и выполнения каких-то действий с этими данными. Я начал с того, что у меня был 1 файл, содержащий 3 компонента и основанный на классах. Я переместил все на функциональные компоненты и постепенно начал создавать больше файлов. Теперь я перехожу к своей последней части изучения React на стороне, и это идет с Redux. Мне было интересно, может ли кто-нибудь дать мне несколько советов о том, с чего начать рефакторинг моего кода для Redux и каких-либо полезных инструментов, которые могут помочь мне в пути. По своей сути это небольшой проект, но я хочу, чтобы код развивался так же, как я развивался благодаря этому. Ниже представлен компонент и .services, которые обрабатывают вызов API. По сути, это весь проект.

HeroDetails. js

import React, {useState, useEffect} from "react"
import "../App.css"
import {fetchHeroDetail} from './services/HeroDetail.services'
import { useParams } from 'react-router-dom'


function HeroDetail() {
    const { id } = useParams()
    const [hero, setHero] = useState({})

    useEffect(() => {
         fetchHeroDetail(id).then(hero => {
            setHero(hero);

        });
    }, [id]);



    return(
        <div>
           <h1>{hero.localized_name} </h1>
            <h2>{hero.move_speed}</h2>
            <h2>{hero.base_health}</h2>
        </div>
    )
}

export default HeroDetail

HeroDetail.services. js

import React from 'react'

export const fetchHeroDetail = async (id) => {
    const data = await fetch(`https://api.opendota.com/api/heroStats`)
    console.log(data)
    const heroDetails = await data.json()
    console.log(heroDetails)
    console.log(heroDetails.find(heroDetail => heroDetail.id === +id))
    return heroDetails.find(heroDetail => heroDetail.id === +id)

};