Contexto.js
import axios from "axios"; import React, { createContext, useContext, useEffect, useReducer, useState, } from "react"; import { cartReducer } from "./Reducer"; const Cart = createContext(); const Context = ({ children }) => { const [products, getProduct] = useState(""); useEffect(() => { axios.get("/api/products/").then((response) => { getProduct(response.data); }); }, []); console.log(products); const [state, dispatch] = useReducer(cartReducer, { products: products, cart: [], }); console.log(state); return <Cart.Provider value={{ state, dispatch }}>{children}</Cart.Provider>; }; export default Context; export const cartState = () => { return useContext(Cart); };Llamé con éxito a axios.get y la consola registró el valor de los productos y tiene todos los productos, pero cuando intento pasarlo en useReducer e intento registrar el estado, muestra una matriz vacía.
Reductor.js
export const cartReducer = (state, action) => { switch (action.type) { default: return state; } }; const [state, dispatch] = useReducer(cartReducer, { products: products, cart: [], });useReducer solo necesita productos para inicializar el estado en el que no se actualizará solo porque actualice los productos con useState;
Y está manteniendo el estado tanto en useState como en useReducer, debe usar solo uno.
si usas useReducer entonces
la estructura de la acción debe {tipo, carga útil}
const [state, dispatch] = useReducer((pervState,action)=>{ switch(action.type){ case "setProducts": return {...prevState,products:action.payload}; case "setCart": return {...prevState,cart:cart.payload}; default: throw new Error(`unhandled action.type ${action.type}`) } },{ products: products, cart: [], });