In my react app, I have a header with a show dialog button.
This header component is included in all pages as necessary.

My current logic to show the dialog is as follows:

• When user clicks the button, I dispatch an action to redux store { type:SHOW_DIALOG }, and let the parent component handle the state change and draw the dialog. I am using material-UI swipeable drawer component.

Handle Click event in an iconbutton in header component...

 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')
  }

In the parent page, where the header is contained...

// ...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>
  );

But, since I have many pages (around 10 pages and server side rendering with NextJS), I will have to repeat the state management in all those pages where the dialog must be shown.

Excuse my lack of knowledge here. Is it possible to avoid this dialog state check in the parent component / page. If so, how can i do it?