Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de Webpack

Curso Práctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Cómo integrar la API de Platzi Store

9/22
Recursos

Aportes 4

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Para el manejo de peticiones asíncronas con Async/Await usamos el plugin @babel/plugin-transform-runtime .

npm i @babel/plugin-transform-runtime -D

Buenas! Les dejo mi versión del hook useInitialState.
Este hook no utiliza la librería Axios por lo cual no hay necesidad de instalarla.
Espero les ayude 😃

import { useState, useEffect} from "react";

const API= "https://us-central1-gndx-fake-api.cloudfunctions.net/api";

const useInitialState = () => {
  try {
    const [products, setProducts] = useState([]);

    useEffect(async () => {
      const response = await fetch(API);
      const data = await response.json();
      setProducts(data);
    }, []);

    return {
      products
    };
  } catch (error) {
    return {
      products: [],
      error: typeof error === "object" ? error.message : error
    }
  }
}

export default useInitialState;

Cómo integrar la API de Platzi Store

https://us-central1-gndx-fake-api.cloudfunctions.net/api

  • Crearemos un hook para trabajar directamente con el llamado de esta API
    1.- Creamos una carpeta en src llamada hooks.
    2.- Creamos un archivo dentro de hooks > llamado useInitialState.js
    3.- Instalamos axios con: npm install axios -S
    4.- Instalamos: npm install @babel/plugin-transform-runtime -D
    5.- Actualizamos .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

App.jsx:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Layout from '../components/Layout';
import NotFound from '../containers/NotFound';

import useInitialState from '../hooks/useInitialState';

const App = () => {
  const initialState = useInitialState();
  const isEmpty = Object.keys(initialState.products).length;
  return (
    <>
    {isEmpty > 0 ? (
        <BrowserRouter>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/checkout" component={Checkout} />
              <Route component={NotFound} />
            </Switch>
          </Layout>
        </BrowserRouter>
      ) : <h1>Loading ...</h1>}
    </>
  )
}

export default App;

useInitialState.js :

import { useEffect, useState } from 'react';
import axios from 'axios';

const API = 'https://us-central1-gndx-fake-api.cloudfunctions.net/api';

const useInitialState = () => {
    const [products, setProducts] = useState([]);

    useEffect(async () => {
        const response = await axios(API);
        setProducts(response.data);
    }, []);

    return {
        products,
    }
}

export default useInitialState;

La api esta caida :c