estoy construyendo una aplicación reactjs
Quiero obtener mi identificación de usuario del estado redux
usando useSelector y páselo a useEffect
Mi código
UsuarioReductor
export function userReducer(state = { token: "", user: {} }, action) { switch (action.type) { case "LOGIN": return action.payload; case "LOGOUT": return action.payload; default: return state; } }VerTransacción.jsx
const ViewTransaction = () => { const user_id = useSelector((state) => state.user.user.id); const params = useParams(); useEffect(() => { setLoading(true); PendingServices.getPendingTransaction( `localhost:8000/user/transaction/pending/get-transaction/${params.id}?user_id=${user_id}` ) .then((response) => {}) .catch((error) => {}) .finally(() => { setLoading(false); }); }, []); return ( <div>transaction</div> ) } export default ViewTransaction;user_id se muestra indefinido.
Debe pasar user_id en la matriz de dependencia useEffects y verificar si está definido o nod ... porque en el primer renderizado no está definido porque redux aún no lo proporcionó
useEffect(() => { if(user_id){ setLoading(true); PendingServices.getPendingTransaction( `localhost:8000/user/transaction/pending/get-transaction/${params.id}?user_id=${user_id}` ) .then((response) => {}) .catch((error) => {}) .finally(() => { setLoading(false); }); } }, [user_id]);Como escribió Drew en el comentario anterior, a su matriz de dependencia le faltan variables. React trata de ser inteligente al no llamar a ganchos en vano, y al pasarle sin dependencias, le permites asumir que la llamada al método en useEffect siempre será la misma, y que puede almacenar en caché y reutilizar el resultado de la invocación. Dado que user_id no está definido inicialmente, cuando nadie ha iniciado sesión, el resultado de useEffect con un usuario no definido se almacena en caché.
Al agregar user_id y params.id en la matriz dep, le está diciendo a React que "cada vez que estas variables cambian, el resultado del método también debe cambiar", por lo que invalidará el resultado useEffect almacenado en caché y ejecutará el método nuevamente.
Recomiendo usar este complemento de eslint para ayudar a detectar estos casos automáticamente: https://www.npmjs.com/package/eslint-plugin-react-hooks