1

tengo un problema, cree mi ruta privada prvate route pero cuando intento entrar a la ruta privada despues del dispatch loginSucces hago console.log al isAuth y mi estado no cambia pero cuando veo en reac-tools mi estado si cambioo

import React,{useEffect} from "react";
import { useSelector, useDispatch } from "react-redux";
import {  Navigate,Outlet } from "react-router-dom";

import { fetchUserToken } from "../../services/isAuth";
import {   loginSuccess, loginFail} from "../login/loginSlice";



export const PrivateRoute =  () => {

    const dispatch = useDispatch();
    const { isAuth } = useSelector(state => state.login);
    const fetchUser = () => async dispatch => {
        try {
                await fetchUserToken();
                dispatch(loginSuccess())
        } catch (error) {
            dispatch(loginFail(error))
        }
      }

    useEffect(()=>{
            dispatch(fetchUser())
    },[dispatch])

    return (isAuth ? <Outlet /> : <Navigate to="/login" />)
};

Archivo Slice:

import { createSlice } from "@reduxjs/toolkit"; 
const initialState = {   
    isLoading: false,   
    isAuth: false,   
    error: "", };  

const loginSlice = createSlice({
    name: "login",
    initialState,   
    reducers: {     
        loginPending: (state) => {       
             state.isLoading = true;     
        },
        loginSuccess: (state) => {       
             state.isLoading = false;
             state.isAuth = true;
             state.error = "";     
        },     
        loginFail: (state, { payload }) => {       
             state.isLoading = false;       
             state.isAuth = false;       
             state.error = payload;     
        },   
    }, 
});
3
  • ¿Si entra a la ruta privada? Compárte los estractos de loginSlice , se supone que loginSuccess() debería llevar argumentos, ¿O cómo notificas al slice que cambia su estado? Saludos
    – g.4
    el 19 dic. 2021 a las 18:22
  • el loginsucces lo que hace es que cambia el estado a true(isAuth) el 21 dic. 2021 a las 2:07
  • import { createSlice } from "@reduxjs/toolkit"; const initialState = { isLoading: false, isAuth: false, error: "", }; const loginSlice = createSlice({ name: "login", initialState, reducers: { loginPending: (state) => { state.isLoading = true; }, loginSuccess: (state) => { state.isLoading = false; state.isAuth = true; state.error = ""; }, loginFail: (state, { payload }) => { state.isLoading = false; state.isAuth = false; state.error = payload; }, }, }); el 21 dic. 2021 a las 2:08

1 respuesta 1

0

Revisé el caso y el código debería entrar a la ruta privada <Outlet /> sin problemas, después del useEffect.

No esta claro lo que se quiere realizar con el token y el user, pero parece una especie de validación.

Comparto mis notas:


cuando intento entrar a la ruta privada despues del dispatch loginSucces hago console.log al isAuth y mi estado no cambia

No se puede obtener el cambio de estado inmediatamente después de dispatch(loginSuccess()), así como se plantea con console.log:

const fetchUser = () => async dispatch => {
    try {
            await fetchUserToken();
            //React:los cambios de estado son operaciones Async
            //React:el estado isAuth ya cambio, pero no en este scope
            dispatch(loginSuccess())
            //React:en este scope isAuth aun sigue siendo false
            console.log(isAuth);
        } catch (error) {
            dispatch(loginFail(error))
    }
}

El cambio de estado se encuentra en scope del redux-store y no en el scope de fetchUser().

Ahora bien, se puede crear otra función slice reducer en loginSlice, por ejemplo isUserVerified(), y ahí trabajar con el cambio de estado mas reciente en el store:

//extracto de metodo en reducers loginSlice
isUserVerified: state => {
    //React-redux: aquí puedo hacer verificaciones
    //React-redux: por ejemplo con el token y el user
    //React-redux:tengo acceso directo al store y al estado mas reciente
    console.log("estado mas reciente de isAuth:",state.isAuth)
}

Luego, invocarla inmediatamente después de dispatch(loginSuccess()):

const fetchUser = () => async dispatch => {
        try {
                await fetchUserToken();
                //los cambios de estado son operaciones Async
                //el estado isAuth ya cambio, pero no en este scope
                dispatch(loginSuccess())
                //en este scope isAuth aun sigue siendo false
                console.log(isAuth);
                //invoca a otro reducer, el store ya tiene el nuevo estado
                //que cambio debido a loginSuccess
                //por ser dispatch, puedo enviar un action object
                //por ejemplo el token
                dispatch(isUserVerified())
                //react: puedo enviar un action object como args
                //dispatch(isUserVerified({type:'VERIFICATION', payload:token}))
            } catch (error) {
                dispatch(loginFail(error))
        }
    }

El patrón mostrado arriba, puede ser una forma secuencial de trabajar con los cambios de estado en redux, antes de devolver el componente.

Sin embargo, hay que vigilar que nuestras funciones/metodos reducer, sean funciones puras.

Redux-thunk

Hay un caso conocido como conditional dispatch, donde se puede usar redux-thunk para obtener el estado actual del store. Sin embargo esto implíca agregar una capa extra de complejidad a tu aplicación.

De lo general, Redux-thunk se usa para crear funciones impuras. Es decir, funciones que por ser impuras, no deben ser parte de un reducer.

Espero que esta respuesta sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.