A importância de se fazer Fetch de dados em React
Fazer o fetch de dados de uma API no React Hooks é importante por várias razões:
- Reutilização de código: Ao criar um hook personalizado para realizar solicitações de API, você pode reutilizar esse código em vários componentes da sua aplicação, o que é muito útil em aplicações de tamanho médio ou grande.
- Gerenciamento de estado centralizado: Ao usar hooks para gerenciar o estado da solicitação de API, você pode mantê-lo de forma centralizada e fácil de gerenciar, o que é útil quando a lógica de gerenciamento de estado é complexa.
- Melhor separação de preocupações: Ao fazer o fetch de uma API no hook, você pode se concentrar no que realmente importa – a lógica da sua aplicação – e deixar que o hook cuide dos detalhes da solicitação de API.
- Maior legibilidade do código: Ao usar hooks para gerenciar o estado da solicitação de API, o código fica mais claro e fácil de entender, pois a lógica de gerenciamento de estado é isolada em um único lugar.
Algumas formas de se fazer Fetch de dados em React
Uma forma de realizar o fetch de dados de uma API no React Hooks é utilizando o hook “useEffect” juntamente com o método “fetch”. Aqui está um exemplo de como isso pode ser feito:
import React, { useState, useEffect } from 'react';
const App = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
const response = await fetch('https://api.example.com/data');
const json = await response.json();
setData(json);
setLoading(false);
};
fetchData();
}, []);
return (
<div>
{loading ? (
<div>Loading...</div>
) : (
data && <pre>{JSON.stringify(data, null, 2)}</pre>
)}
</div>
);
};
export default App;
Neste exemplo, o hook “useEffect” é utilizado para realizar a chamada da API assíncrona quando o componente é montado pela primeira vez. A resposta da API é armazenada no estado “data” e o estado “loading” é usado para indicar se a solicitação de API está em andamento ou não.
Outra forma de realizar o fetch de dados de uma API no React Hooks é utilizando o hook “useState” e o “useReducer”. Aqui está um exemplo de como isso pode ser feito:
import React, { useState, useReducer } from 'react';
const dataFetchReducer = (state, action) => {
switch (action.type) {
case 'FETCH_INIT':
return { ...state, isLoading: true, isError: false };
case 'FETCH_SUCCESS':
return { ...state, isLoading: false, isError: false, data: action.payload };
case 'FETCH_FAILURE':
return { ...state, isLoading: false, isError: true };
default:
throw new Error();
}
};
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
useEffect(() => {
let didCancel = false;
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' });
try {
const result = await axios(url);
if (!didCancel) {
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
}
} catch (error) {
if (!didCancel) {
dispatch({ type: 'FETCH_FAILURE' });
}
}
};
fetchData();
return () => {
didCancel = true;
};
}, [url]);
return [state, setUrl];
};
const App = () => {
const [{ data, isLoading, isError }, doFetch] = useDataApi(
'https://api.example.com/data',
null
);
return (
<div>
{isError && <div>Something went wrong ...</div>}
{isLoading ? (
<div>Loading ...</div>
) : (
data && <pre>{JSON.stringify(data, null, 2)}</pre>
)}
<button onClick={() => doFetch('https://api.example.com/data')}>
Fetch Data
</button>
</div>
);
};
export default App;
Neste exemplo, o hook “useState” é utilizado para armazenar a URL da API e o “useReducer” é utilizado para gerenciar o estado do fetch dos dados da API. O estado inclui informações sobre se a solicitação está em andamento, se houve algum erro ou se os dados foram retornados com sucesso.
O dataFetchReducer é um reducer que controla o estado da solicitação de dados da API. Ele é escrito como uma função que recebe o estado atual e uma ação, e retorna um novo estado baseado na ação.
As ações são objetos com uma propriedade type que descreve a ação que está sendo realizada e, opcionalmente, uma propriedade payload que carrega dados adicionais. No exemplo, as ações são:
FETCH_INIT: Disparada quando a solicitação de dados começa. Atualiza o estado para indicar que a solicitação está em andamento.FETCH_SUCCESS: Disparada quando a solicitação de dados é bem-sucedida. Atualiza o estado para incluir os dados retornados pela API.FETCH_FAILURE: Disparada quando a solicitação de dados falha. Atualiza o estado para indicar que houve um erro.
O dataFetchReducer atualiza o estado atual de acordo com a ação recebida. Ele é utilizado com o hook useReducer para gerenciar o estado da solicitação de dados da API e para manter o estado gerenciado de forma centralizada em vez de espalhá-lo por todo o componente.
O useDataApi é um hook customizado que combina o useReducer e o useEffect para realizar solicitações de API de forma fácil e gerenciável.
Ele recebe uma URL como entrada e retorna o estado atual da solicitação de API, bem como uma função que pode ser usada para iniciar a solicitação.
Internamente, o hook usa o useReducer com o dataFetchReducer para gerenciar o estado da solicitação de API. O useEffect é usado para iniciar a solicitação de API quando a URL é atualizada.
O hook mantém o estado da solicitação de API gerenciado de forma centralizada e fornece uma interface fácil de usar para fazer solicitações de API no componente. Dessa forma, você pode se concentrar no que realmente importa – a lógica da sua aplicação – e deixar que o hook cuide dos detalhes da solicitação de API.
Aqui está outra forma de realizar o fetch de uma API usando o hook useState:
import React, { useState, useEffect } from 'react';
const useDataApi = (initialUrl) => {
const [data, setData] = useState(null);
const [url, setUrl] = useState(initialUrl);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return [{ data, isLoading, isError }, setUrl];
};
Neste exemplo, o hook useDataApi retorna um array com o objeto de estado que inclui os dados retornados pela API, o estado de carregamento e o estado de erro. Ele também retorna uma função setUrl que pode ser usada para atualizar a URL para a qual fazer o fetch.
O hook useEffect é usado para disparar a solicitação de API quando a URL é atualizada. Dentro do useEffect, uma função fetchData é definida que realiza a solicitação de API usando o fetch e atualiza o estado com o resultado.
Este exemplo ilustra como o hook useState pode ser usado para gerenciar o estado da solicitação de API, mas é importante lembrar que esse tipo de gerenciamento de estado é mais fácil de fazer com o useReducer quando a lógica de gerenciamento de estado é mais complexa.
