Estoy tratando de usar el estado global en mi aplicación React usando React Context y el gancho useReducer . Cuando trato de acceder al estado usando mi useStateContext en descendientes lejanos, vuelvo a estar indefinido. Como prefacio, estoy usando react-three-fiber donde obtengo mi error de contexto.

App.js

 const App = () => { return ( <GameProvider> <AppState /> </GameProvider> ); }; const AppState = () => { const state = useStateContext() // this works. Direct child of Provider return <Game /> } const Game = () => { const state = useStateContext(); // this works. 2nd descendant of Provider return <Scene/> }; const Scene = () => { const state = useStateContext(); // this works. 3rd descendant return ( <div id={styles.scene}> <Canvas > <OrbitControls minDistance={9} maxDistance={9} /> <ambientLight intensity={0.5} /> <spotLight position={[10, 15, 10]} angle={0.3} /> <Cube size={5} position={[0, 0, 0]} /> </Canvas> </div> ); }; const Cube = () => { const state = useStateContext(); // returns undefined. What gives? return <group></group> }

StateContext.js

 import React, { useContext, createContext, useReducer } from 'react' import reducer from './reducer'; const StateContext = createContext(); const DispatchContext = createContext(); export const useDispatchContext = () => useContext(DispatchContext) export const useStateContext = () => useContext(StateContext); const initialState = { test: 1 } export const GameProvider = ({ children }) => { const [state, dispatch] = useReducer(reducer, initialState) return ( <DispatchContext.Provider value={dispatch}> <StateContext.Provider value={state} > {children} </StateContext.Provider> </DispatchContext.Provider> ) }

Quería usar Context ya que pensé que podía obtener el estado en cualquier descendiente de mi aplicación. Intenté consultar los documentos de reacción sobre este problema, pero fue en vano.

EDITAR:

También creo que sería importante mencionar que estoy usando react-three-fiber que envuelve mi componente Cube en un Canvas .