Creando nuestro primer custom hook

AppContext.js

import React, { createContext } from "react";
import useInitialState from "../hooks/useInitialState";

export const AppContext = createContext();

const AppProvider = ({ children }) => {
  const initialState = useInitialState();

  return (
    <AppContext.Provider value={initialState}>{children}</AppContext.Provider>
  );
};

export default AppProvider;

App.js

import AppProvider from "../context/AppContext";

const App = () => {
  return (
    <AppProvider>
      <BrowserRouter>
        <Layout>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/checkout" component={Checkout} />
            <Route exact path="/checkout/information" component={Information} />
            <Route exact path="/checkout/payment" component={Payment} />
            <Route exact path="/checkout/success" component={Success} />
            <Route component={NotFound} />
          </Switch>
        </Layout>
      </BrowserRouter>
    </AppProvider>
  );
};
export default App;

Dejo por aca otra forma de manejar el Context escrita por el creador de test-library
https://kentcdodds.com/blog/how-to-use-react-context-effectively/

Hola comunidad, alguien me puede explicar más detalladamente esta linea de código? No le encuentro mucho la logica, se que es para eliminar pero, no encuentro la relación inherente 😕

const removeFromCart = payload => {
    setState({
      ...state,
      cart: state.cart.filter(items => items.id !== payload.id)
    });
  };

Estas clases con GitHub Copilot es una delicia

Hola aqui una forma de settear el state

const handleAddToCart = payload => {
    setState(c => ({
      ...c,
      cart: [...c.cart, payload]
    }))
  }

  const handleRemoveFromCart = payload => {
    setState(c => ({
      ...c,
      cart: c.cart.filter(items => items.id !== payload.id)
    }))
  }

Yo use esa misma forma de filter en el proyecto pasado pero al final si coloco un mismo item 2 veces, me los borra ambos aun si solo quiero borrarlo una vez

graxias tio oscar

Excelente clase muy interesante como se maneja context

Hola, les dejo el avance de mi proyecto, hecho en Nextjs con Styled Components:

https://github.com/danyel117/platzi-conf-store

Commit clase 28.

Les comparto la manera en que me gusta manejar el context junto con el reducer.

import React, { useReducer } from 'react';

import initialState from '../initialState';
import reducer from '../reducer';

const Context = React.createContext({});

const ContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
  );
};

export { Context, ContextProvider };

El context se guarda en local storage?