Consumindo uma API no React
Tags: react, api, http, ptbr
Published: 2021-02-01 02:04:20

# Contexto
> O código dessa aplicação está nesse [link](https://github.com/antoniel/breaking-bad-characters), o resultado final se encontra [aqui](http://breaking-bad-characters-git-main.antonielmagalhaes.vercel.app/).

Uma duvida muito comum quando se inicia no desenvolvimento web é como fazer aplicações o backend e o frontend se comunicarem. Como que eu posso fazer minha aplicação react se comunicar com minha API ? Essas são as dúvidas que eu vou tentar responder brevemente com esse post.

# Como ?

A comunicação entre essas partes do sistema pode ser feita a partir do método http, que é um protocolo de comunicação onde através dele é possível a comunicação entre os diferentes pontos de um sistema. O protocolo Http possui métodos que são utilizados para diferentes finalidades, os principais são o GET e o POST, explicando de forma mínima o GET teria a função de pegar dados do servidor enquanto o POST teria a função de transmitir dados para o servidor.

# Como eu faço isso em uma aplicação React 



O Código abaixo é uma função javascript que vai receber o nome de uma personagem e vai fazer uma requisição para para a api retornar os personagens que coincidem com aqueles nomes.
```javascript
const fetchCharacters = async (charactersName) => {
    const response = await fetch(`https://www.breakingbadapi.com/api/characters/?name=${charactersName}`);
    const data = await response.json();
    return data;
  };
```
Na primeira linha há uma requisição é feita a requisição para o a rota `api/characters/` passando o parâmetro `name` que vai receber o parâmetro da função, a constante response vai receber uma Promise de uma resposta http, para extrair os dados dessa resposta utilizamos na proxima linha o método `.json()` que também é um Promise só que agora da resposta do servidor com o nome do personagem, apelido... 

![Screenshot_20210131_225621](https://dev-to-uploads.s3.amazonaws.com/i/oc9wziezd68vt5jj2x2s.png)

No caso da minha aplicação essa função é chamada ao enviar do formulário que pergunta o nome do personagem da seguinte forma:
 
```jsx
const handleSubmit = async (e) => {
    e.preventDefault();
    const inputValue = e.target[0].value;
    const charachtersData = await fetchCharacters(inputValue);
    setCharacters(charachtersData);
  };
  <form onSubmit={handleSubmit}>
```
A primeira linha da função handleSubmit vai evitar que a página recarregue por conta do comportamento padrão do elemento form, o inputValue armazena o nome do personagem pesquisado, o charachtersData vai armazenar a resultado da função que foi apresentada anteriormente, e por último a reposta da api é definida como estado pelo setCharacters, agora é só exibir esses dados como queira.

Uma outra forma de fazer essa requisição é quando o componente é montado, digamos que você quer exibir as informações do Walter White enquanto o usuário não escolhe o personagem, você pode ter pensado em fazer da seguinte forma:

```jsx
const SearchBar = () => {
cosnt [characters, setCharacters] = useState(null)
fetchCharacters('Walter White').then(data => {setCharacters(data)})
  return (
    <form>
      {/*Componentes do formulário*/}
    </form>
  );
};
```
Se feito dessa forma, você vai ter um problema desse componente ser renderizado infinitamente pois, como ele atualiza o estado do componente, ele força que o componente remonte, e durante o processo de montagem ele vai novamente fazer a requisição e assim por diante... 

Para fazer essa requisição enquanto o componente monta é necessário utilizar o hook useEffect, /*UTILIZANDO ARRAY DE DEPENDÊNCIAS*/
  
```jsx
const SearchBar = () => {
cosnt [characters, setCharacters] = useState(null)
useEffect(() => {
  fetchCharacters('Walter White').then(data => {setCharacters(data)},[])
}, [])

  return (
    <form>
      {/*Componentes do formulário*/}
    </form>
  );
};
```
Dessa forma toda vez que o componente SearchBar for montado a função fetchCharacters vai ser chamada e seu retorno passado para o setCharacters que vai modificar o estado.

Essas são as formas de comunicação http através do React, a partir da montagem do componente ou através de um evento como o enviar do formulário.