1

Estoy empezando con redux y react y estoy un poco confundido con lo siguiente:

Tengo un objeto authen el store de reduxcon los valores:

isLoggedIn(pin):false
accountCreated(pin):false
user(pin):null
token(pin):null

Y tengo el componente Main.js que es el inicio de la aplicacion.

import React from 'react';
import MainHeader from 'components/MainHeader';
import Footer from 'components/Footer';

const Main = ({ children }) => {
  return (
    <div className='container-fluid bg-gradient-info'>
      <MainHeader />
      <main className='p-3'>
        {children}
      </main>
      <Footer />
    </div>
  );
};

export default Main;

Lo que yo quiero es obtener una variable que contenga el valor de store.auth.isLoggedInpara, en base al valor de esa variable, redirigir al Logino al Iniciode mi app.

Entiendo que con la funcion mapStateToProps podria hacer algo como:

const mapStateToProps = state => ({ 
   loggedIn: state.auth.isLoggedIn
})

export default connect(mapStateToProps)(Main)

Y de esta manera (creo) estaría conectado desde mi componente con el storede redux. No sé cómo hacer para obtener dentro de todo el componente una variable loggedInque devuelva trueo false de acuerdo con el valor de store.auth.isLoggedIn. Alguna sugerencia? Muchas gracias.

1 respuesta 1

1

Por lo visto, estás haciendo todo bien, siendo así, te voy a aclarar lo siguiente para que entiendas como puedes utilizar estos props que inyecta redux en tu componente:

  1. La función connect de redux le pasa como argumento a tu función mapStateToProps todo el estado global de tu aplicación alojado en redux y a su vez inyecta el objeto que devuelve esta última función como props (como su nombre lo indica, un "estado mapeado a props") a tu componente.

Con esta aclaración, si tienes lo siguiente:

const Main = ({ children, loggedIn }) => {
    // Aquí tendrías acceso a los valores que inyectes a través de
    // mapStateToProps como props de tu component
    if (!loggedIn) {
        // TODO: El usuario no está autenticado por lo tanto
        // no puede visualizar dicho componente.
        return null;
    }

    return (
        <div className='container-fluid bg-gradient-info'>
            <MainHeader />
            <main className='p-3'>
                {children}
            </main>
            <Footer />
        </div>
    );
};

const mapStateToProps = state => ({ 
    loggedIn: state.auth.isLoggedIn
});

export default connect(mapStateToProps)(Main);
1
  • Impecable! Muchísimas gracias por ese aporte!
    – Agustin G.
    Commented el 7 dic. 2020 a las 15:40

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.