Estoy usando react-redux para almacenar un estado modeData que es una matriz de objetos. Usando react-hotkeys-hook , cuando el usuario presiona ctrl+l , se ejecuta una función que actualiza el estado. En esa misma función, cuando console.log el mismo estado, no refleja los cambios.
Aquí está el código que estoy usando:
import { useSelector, useDispatch } from "react-redux"; import { modeDataIncrement } from "./redux/modeSlice"; import { useHotkeys } from "react-hotkeys-hook"; import { useEffect } from "react"; //.. const modeData = useSelector((state) => state.mode.modeData); //array of objects. const handler = (id) => { const isActive = modeData.find((x) => x.id === id).active; console.log(modeData); // does not show the updated state dispatch(modeDataIncrement(id)); }; useHotkeys("ctrl+l", () => handler("Clone")); useEffect(() => { console.log(modeData); //working fine! }, [modeData]); modeSlice.js :
import { createSlice } from "@reduxjs/toolkit"; export const modeSlice = createSlice({ name: "mode", initialState: { modeData: [{ id: "Clone", active: false }], }, reducers: { modeDataIncrement: (state, action) => { state.modeData.find( (e) => e.id === action.payload && (e.active = !e.active) ); }, }, }); export const { modeDataIncrement } = modeSlice.actions; export default modeSlice.reducer; ¿Alguna idea de lo que estoy haciendo mal?
¡Gracias!
Su código necesita usar la última versión de modeData, pero según el código fuente de useHotkeys , memorizará la función y no la actualizará automáticamente. Entonces, siempre está usando la versión de la devolución de llamada que existía en el primer renderizado.
Para solucionar esto, debe pasar una matriz de dependencias a useHotkeys, para que pueda romper la memorización:
const handler = (id) => { const isActive = modeData.find((x) => x.id === id).active; console.log(modeData); dispatch(modeDataIncrement(id)); }; useHotkeys("ctrl+l", () => handler("Clone"), [modeData]);