Integrando la API de Platzi Store

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);