Estoy tratando de buscar empleados y esto es lo que estoy tratando de hacer usando useEffect
function AdminEmployees() { const navigate = useNavigate(); const dispatch = useDispatch(); // fetching employees const { adminEmployees, loading } = useSelector( (state) => state.adminFetchEmployeeReducer ); useEffect(() => { dispatch(adminFetchEmployeeAction()); if (adminEmployees === "unAuthorized") { navigate("/auth/true/false"); } }, [adminEmployees, navigate,dispatch]); console.log("Here i am running infinie loop"); console.log(adminEmployees); return ( <> {loading ? ( <Loader></Loader> ) : adminEmployees === "no employees" ? ( <h1>No Employees</h1> ) : ( <> {adminEmployees && adminEmployees.map((employee) => { return ( <div className="admin__employee__container" key={employee.id}> <AdminSingleEmployee employee={employee} ></AdminSingleEmployee> </div> ); })} </> )} </> ); }Aquí quiero lograr 2 objetivos:
pero al hacer esto como en el código, crea un bucle infinito.
¿Cómo puedo lograr la funcionalidad deseada?
Fácil camino sucio: dividir useEffect en 2
useEffect(() => { if (adminEmployees === "unAuthorized") { navigate("/auth/true/false"); } }, [adminEmployees, navigate]); useEffect(() => { dispatch(adminFetchEmployeeAction()); }, [dispatch]);Mejor manera: maneje ese caso en el reductor o creador de acciones para voltear la bandera en la tienda y luego consumirlo en el componente:
const { shouldNavigate } = useSelector(state => state.someSlice); useEffect(() => { if(shouldNavigate) { // flipping flag back dispatch(onAlreadyNavigated())); navigate("/yourPath..."); }, [navigate, dispatch, shouldNavigate] );