1. App.tsx is the main component and in this component MsgAlertDialogView.tsx is included.

import { createElement, useEffect} from 'react';
import { useSelector } from 'react-redux';
import {
  selectDialogFlag,
  selectMsgAlertResponse,
} from './common/MsgAlertDialogView/state/msgAlertDialogSelector';

const App= () => {

const displayFlag = useSelector(selectDialogFlag);
const msgDetails = useSelector(selectMsgAlertResponse);

return (
<div>
{displayFlag ? <MsgAlertDialogView /> : ''}
</div>
)
};

2. MsgAlertDialogView.tsx is a common component included in App.tsx. Clicking “Yes” button from MsgAlertDialogView.tsx dialog should execute a method in Seasons.tsx. Since dispatch is happening from Seasons.tsx and call back should happen in Seasons.tsx only.

import { createElement, useEffect} from 'react';
import { useSelector } from 'react-redux';
import {
  selectDialogFlag,
  selectMsgAlertResponse,
} from './common/MsgAlertDialogView/state/msgAlertDialogSelector';

const MsgAlertDialogView= () => {

const displayFlag = useSelector(selectDialogFlag);
const msgDetails = useSelector(selectMsgAlertResponse);

return (
<Dialog>
  <div id="title">{msgDetails.title}</div>
  <div id="message">{msgDetails.message}</div>
  <button>Yes</button>
  <button>No</button>
</Dialog>
)
};

• Seasons.tsx is a seperate page component where dispatch happens and set states in setMsgAlertResponse. displayFlag becomes true and display MsgAlertDialogView dialog.deleteAfterAction is the method that should get called on clicking on “Yes” from MsgAlertDialogView.tsx

    import { createElement, useEffect, useState} from 'react';
    import { useSelector } from 'react-redux';
import { setMsgAlertResponse } from '../../../common/MsgAlertDialogView/state/msgAlertDialogSlice';
    const Seasons= () => {
    const [isDeleteSeasonDialogOpen, setIsDeleteSeasonDialogOpen] = useState(false);
    useEffect(() => {
    if (isDeleteSeasonDialogOpen) {
      dispatch(
        setMsgAlertResponse({
          title: "Title",
          message: "this is the title",
          type: 'warning',
        })
      );
    }
    }, [dispatch, isDeleteSeasonDialogOpen]);
    const deletePress=()=>{
    setIsDeleteSeasonDialogOpen(true);
    }
    const deleteAfterAction = ()=.{ //action of dispatch here }
    return (
    <div>
      <button onclick={deletePress}>Delete</button>
    </div>
    );
    };

• slice code

reducers: {
    setMsgAlertResponse(state: msgAlertState, response) {
      state.displayFlag  = true;
      state.msgAlertResponse = {
        title: response.payload.title,
        message: response.payload.message,
        type: response.payload.type === 'error' ? 'error' : response.payload.type,
      };
    },
  },

• msgAlertDialogSelector

export const selectMsgAlertResponse = createSelector([selectMsgAlertState], (state) => {
  return state.msgAlertResponse;
});

1. I have tried to implement parent to child props sending and call parent method.

issue : In my case Parent is App.tsx, child is MsgAlertDialogView.tsx but dispatch is happening from Seasons.tsx and i want to execute deleteAfterAction method in seasons.tsx. Parent and child concept will not work and i cannot put deleteAfterAction method in App.tsx.

2. Tried Server Sent Event Bus concept and achieved but method to subscribe was not dynamic. I dont want to follow this approach.

Please give me the suggestions to take forward.