En mi aplicación de react , tengo un encabezado con un botón de mostrar diálogo.
Este componente de encabezado se incluye en todas las páginas según sea necesario.
Mi lógica actual para mostrar el diálogo es la siguiente:
redux { type:SHOW_DIALOG } y dejo que el componente principal maneje el cambio de estado y dibuje el cuadro de diálogo. Estoy usando el componente de cajón deslizable material-UI .Manejar el evento Click en un botón de icono en el componente de encabezado ...
const handleClick = () => { /* * temporary bypass surgery to avoid going through login dialog * dispatch({type:'SHOW_CONTACT_INFO'}) * return; */ if (!isLoggedIn) dispatch({type: 'SHOW_LOGIN_DLG'}) else router.push('/my-account') }En la página principal , donde se encuentra el encabezado...
// ...other code <Container> {/* Whether or not to show the login dialog . */} {loginProcessState>=1 && loginProcessState<=7 ?<LoginDialog type={loginProcessState===1?"login":"otp"} /> : null} {/* if contact edit dialog is set to show, show it. */} {contactEditDisplay? <ProfileEditDialog />:null} </Container> );Pero, como tengo muchas páginas (alrededor de 10 páginas y renderizado del lado del servidor con NextJS), tendré que repetir la gestión de estado en todas aquellas páginas donde se debe mostrar el diálogo.
Disculpe mi falta de conocimiento aquí. ¿Es posible evitar esta verificación de estado de diálogo en el componente / página principal? Si es así, ¿cómo puedo hacerlo?
Sugerencia:
Mueva el componente LoginDialog hacia arriba y renderícelo directamente dentro del componente raíz <App/> .
Y luego use React.useContext para llamar a ese dispatch en varios componentes para activar loginProcessState .
Lo anterior debería ayudarlo a representar el inicio de sesión en todos los componentes.