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

Integrando la API de Platzi Store

10/22
Recursos

Aportes 2

Preguntas 0

Ordenar por:

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

Integrando la API de Platzi Store

  • Creamos una carpeta dentro de src llamada context.
  • Dentro de context creamos el archivo AppContext.js
    AppContext.js:
import React from 'react';

const AppContext = React.createContext({});

export default AppContext; 

En App.jsx importamos AppContext:

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

Y lo añadimos a nuestro template:

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

Y Aqui el código de Products.jsx: link

En el componente de Products, ya no es necesario usar desestructuración para acceder a products, el api ya regresa directo el array.

Quedaría así:
const products = useContext(AppContext);