Facade Pattern - React

#react #programming #tutorial

Existem diversos padrões de projetos que ajudam a manter o código limpo e mais legível, e neste post irei mostrar como usar o Facade Pattern para criar uma função que busca os personagens fornecidos pela SWApi.

O Facade Pattern é um dos padrões mais famosos do GoF (Gang of Four), e é do tipo estrutural. A maior vantagem dele é deixar a manutenção e uma possível refatoração muito mais simples, tanto do Front End, quanto do Back End.

No exemplo eu utilizei o axios, mas você também pode utilizar o fetch.

Configuração padrão do axios, adicionando a url da SWApi.

import axios from "axios";

export default axios.create({
  baseURL: 'https://swapi.dev/api/',
  headers: {
    'Content-Type': 'application/json'
  }
})

Função getFetch

import axios from "../api/axios";

export default async function getFetch (url) {
    const response = await axios.get(url)
    return response.data
}

Consumo da SWApi

import getFetch from "./utils/getFetch";

function App() {
  const [characters, setCharacters] = useState([]);
  const [loading, setLoading] = useState(false);

  async function getCharacters() {
    try {
      setLoading(true);
      const { results } = await getFetch("people/");
      setCharacters(results);
    } catch (error) {
      throw new Error(error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    getCharacters();
  }, []);

  return (
    <div className="App">
      <ul>
        {loading && <p>Carregando...</p>}
        {characters &&
          characters.map((character) => (
            <li key={character.name}>{character.name}</li>
          ))}
      </ul>
    </div>
  );
}