Implementé mi enlace personalizado "useReducerWithCallback"
export default function useReducerWithCallback( reducer, initialState, initializer ) { const [state, dispatch] = useReducer(reducer, initialState, initializer); const callbackRef = useRef(undefined); const customDispatch = (action, callback) => { callbackRef.current = callback; console.log("Callback updated"); // <------- dispatch(action); }; useEffect(() => { console.log("Executing callback"); // <-------- callbackRef.current?.(state); }, [state]); return [state, customDispatch]; }que básicamente funciona como el típico useStateWithCallback pero con un useReducer.
Estoy usando este enlace en un proveedor de contexto, que se consume en una pantalla que está dentro de un navegador de pila.
Esta pantalla tiene un oyente para mi base de datos, y cuando se activa, la pantalla se comunica con el reductor de mi proveedor de contexto, pasando una devolución de llamada personalizada.
El problema que tengo es cuando presiono otra instancia de la misma pantalla en mi navegador de pila, ya que ambas pantallas escuchan la misma parte de la base de datos, se comunican con el proveedor de contexto al mismo tiempo y sus devoluciones de llamada se superponen.
Este es mi proveedor de contexto:
function contentsReducer(contents, action) { ... } export function ContentsProvider({ children }) { const [contents, dispatch] = useReducerWithCallback( contentsReducer, new Map([]) ); ... const addContents = (contents, callback = undefined) => { console.log("Adding contents"); <------ dispatch( { type: "add-contents", contents, }, callback ); }; ... }Las pantallas de pila 1 y 2 (la última presionada) son iguales. Ambos se comunican con el proveedor de contexto usando su método "addContents", que ves en el código anterior, pero por alguna razón, las devoluciones de llamada se superponen.
Este es el resultado de useReducerWithCallback:
Adding contents Callback updated Adding contents Callback updated Executing callback Executing callbackCuándo debería ser:
Adding contents Callback updated Executing callback Adding contents Callback updated Executing callback¿Algunas ideas? Creo que el problema es por la centralización del reductor en un único punto, el proveedor de contexto, pero no sé cómo solucionarlo.
Gracias.