Acabo de aprender sobre el gancho createContext y me pregunto cuál es el mejor enfoque para usar múltiples contextos globalmente a lo largo del proyecto.
Por lo que he visto, si desea crear y usar múltiples contextos, parece un poco complicado tener múltiples etiquetas de contexto anidadas y me pregunto si hay una forma más limpia de hacerlo.
(Ejemplo de cómo creo que se vería un proyecto usando cuatro contextos)
import React, { createContext, useState } from "react"; export const OneContext = createContext(); export const TwoContext = createContext(); export const ThreeContext = createContext(); export const FourContext = createContext(); export default function App(){ const [one, setOne] = useState(null); const [two, setTwo] = useState(null); const [three, setThree] = useState(null); const [four, setFour] = useState(null); return( <> <OneContext.Provider value={one}> <TwoContext.Provider value={two}> <ThreeContext.Provider value={three}> <FourContext.Provider value={four}> "Insert components here" <FourContext.Provider /> <ThreeContext.Provider /> <TwoContext.Provider /> <OneContext.Provider /> </> ) }puedes hacer algo asi
<AppContext.Provider value={{ oneCTX: [one, setOne], twoCTX: [two, setTwo], threeCTX: [three,setThree] }} > {props.children} </AppContext.Provider>en los otros archivos, puede llamarlos así, importar AppContext desde el archivo context.js primero, luego hacer eso
const { oneCTX } = useContext(AppContext); const [one, setOne] = loggedUserCTX;useReducer suele ser preferible a useState cuando tiene una lógica de estado compleja que involucra múltiples subvalores o cuando el siguiente estado depende del anterior.
import React, { createContext, useReducer } from "react"; const OneContext = createContext(); const initialState = {one:null, two:null, three:null, four:null}; function reducer(state, action) { return { ...state, [action.type]: action.payload } } export default function App(){ const stateAndDispatch = useReducer(reducer, initialState) return( <> <OneContext.Provider value={stateAndDispatch}> "Insert components here" <OneContext.Provider /> </> ) }