Как настроить loader при загрузке данных через get запрос?

Question

[Иван Филипов]

Здравствуйте.
Загружаю репозитории, через api github и хочу в момент загрузки, пока на стороне клиента данные не будут получены показывался "Loader". Проблема в том, что данные подгружаются и запрос выполняется, но при этом loader не работает, т.к. setIsFetching(true/false) не срабатывает. Пробовал так же через case в самом reposReducer делать, но там тоже проблема вылазит и get запрос не выполняется вообще. Помогите советом, что делаю не так?
Сам запрос:
repos.js :

export const getRepo = async  (userName, repoName, setRepo) => {
    setIsFetching(true);
        const response = await axios.get(`https://api.github.com/repos/${userName}/${repoName}`);
    setRepo(response.data);
    setIsFetching(false);
}

reposReducer.js:

const initialState  = {
    items: [],
    isFetching: true.
    ...
}

export default  function reposReducer(state = initialState , action) {
    switch (action.type) {
        case... ,
        default:
            return state
    }
}

export ...

Компонент :

const {username, reponame} = useParams();
    const [repo, setRepo] = useState({});
    const isFetching = useSelector(state => state.repos.isFetching);
    useEffect(() => {
        getRepo(username, reponame, setRepo);
    }, []);

Comments

[chemdev]

Не стану писать в ответы, так как не продвинут в реакте, однако в качестве базового решения можно использовать стейт loading, либо какие нибудь готовые хуки которые поставляют loadng, error и все что надо для фетча

[Михаил]

Я всегда выношу все запросы в отдельные хуки, где бы располагалось локальное состояние запроса (isLoading, isError, data и прочее) и вызываю их внутри компонента.

Примерно такого вида:

function useGetData(...) {

  const [ isLoading, setIsLoading ] = React.useState(false)
  const [ isError, setIsError ]     = React.useState(false)
  const [ data, setData ]           = React.useState(null)

  async function getData() {
    try {
      setIsLoading(true)
      const data = await fetch(...)
      setData(data)
    } catch (error) {
      setIsError(true)
    } finally {
      setIsLoading(false)
    }
  }

  return {
    isLoading,
    isError,
    data
  }

}

Код самого компонента:

const Component = () => {

  const {
    isLoading,
    isError,
    getData,
    data
  } = useGetData()

  if (isLoading) return (<div>Loading...</div>)
  if (isError)   return (<div>Oops...</div>)
  if (data)      return (<div>{data}</div>)
  
  return (
    <button onClick={getData}>
      получить данные
    </button>
  )

}

А дальше уже если нужно записывать в state/store, то создаешь useEffect на отлов data и как только ты их получаешь - диспатчишь куда требуется. А ещё лучше не городить велосипед и использовать react-query, который позволяет удобно работать с запросами, "оборачивая" их в хуки.

Надеюсь ответил по теме и чем-нибудь помог

[Иван Филипов]

Михаил, Спасибо, за ответ. Сделал костыль с состоянием внутри компонента isLoading.Думаю, ваш способ с отдельным хуком более грамотный.

[Михаил]

Иван Филипов, не за что, потом все-таки посмотрите в сторону библиотеки react-query - очень удобная)