Estoy creando un clon de Amazon de reacción, por lo que para darle al usuario la posibilidad de agregar un producto a su cesta (como la primera versión de todo el futuro sistema de pago), he usado Context Api para administrar esto.

Cuando terminé de escribir el código de Context Api y lo agregué al archivo index.js para poder acceder a los datos, obtuve una pantalla en blanco sin ningún mensaje de error. No se donde esta exactamente el problema.

StateProvider.js

 import React , { createContext, useContext, useReducer} from 'react' export const StateContext = createContext(); export const StateProvider = ({reducer , initialValue, children}) => { <StateContext.Provider value={useReducer(reducer, initialValue)}> {children} </StateContext.Provider> }; export const useStateValue = () => useContext(StateContext)

reductor.js

 export const initialState = { basket: [], }; const reducer = (state, action) => { switch(action.type) { case "ADD_TO_BASKET": return{ ...state, basket: [...state.basket, ...action.item] }; default: return state; }; }; export default reducer;

índice.js

 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { StateProvider } from './Special_components/StateProvider'; import reducer, { initialState } from './Special_components/reducer'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <StateProvider reducer={reducer} initialState={initialState} > <App /> </StateProvider> </React.StrictMode> )