Подтверждение вывода диалога с реактивной реакцией

Question

Итак, мне нужно иметь диалоговое окно подтверждения при выполнении определенных действий.В настоящее время я делаю рендеринг внутри компонента, где это необходимо.

           <Dialog
                open={this.state.confirmationDialog}
                className="ConfirmationDialog"
            >
                <ConfirmationDialog
                    title={Strings.logoutConfiramtion}
                    confirm={() => {
                       //do some operations
                        this.setState({ confirmationDialog: false });
                    }}
                    cancel={() => {
                        this.setState({ confirmationDialog: false });
                    }}
                />
            </Dialog>

Теперь мне нужно это во многих местах.Таким образом, наличие этого в каждом компоненте делает его избыточным.

Итак, я хотел бы иметь другой компонент, скажем, Main.js, который выполняет рендеринг таких компонентов, как всплывающее окно с ошибкой, диалог подтверждения и другие подобные общие операции.В моем файле Main.js

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "redux/actions/global.actions";
import { bindActionCreators } from "redux";

class MainC extends Component {
    render() {
        return (
            <div className="App">
                <Dialog
                    open={this.props.confirmationDialog.show}
                >
                   <ConfirmationDialog
                    title={this.props.confirmationDialog.message}
                    confirm={() => {
                     //callback
                      this.props.hideConfirmationDialog()
                    }}
                     cancel={() => {
                     this.props.hideConfirmationDialog()
                    }}

           </Dialog>
        </div>
    );
}
}

const mapStateToProps = state => ({
    confirmationDialog: state.reducer.confirmationDialog,
});
const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);

const Main = connect(
    mapStateToProps,
    mapDispatchToProps
)(MainC);

export default Main;

В моем файле действий

export function showConfirmationDialog(msg) {
    return {
        type: actions.showConfirmation,
        confirmationDialog: {
            show: true,
            message: msg
        }
    };
}

export function hideConfirmationDialog() {
    return {
        type: actions.hideConfirmation
    };
}

Мой файл редуктора

 import * as actions from "../actions";

export function globalReducer(
    state = {
        confirmationDialog: {
            show: false,
            message: ""
        },
    },
    action
) {
    if (action.type === actions.showConfirmation) {
        return {
            ...state,
            confirmationDialog: {
                show: action.confirmationDialog.show,
                message: action.confirmationDialog.message
            }
        };
    } else if (action.type === actions.hideConfirmation) {
        return {
            ...state,
            confirmationDialog: {
                show: false,
                 message: ""
            }
        };
    } 
    return state;
}

Теперь в моем отдельном компоненте, который обернутпри подключении, где я хочу показать диалоговое окно подтверждения, я показываю возможность вызова showConfirmationDialog как обещание, то есть

this.props.showConfirmationDialog(Strings.confirmationMsg).then(response=> {
//when user presses yes case
//do some actions
},error=> {
}
)

Как я могу достичь такого рода функциональности?Я новичок в редуксе и понял некоторые основы.Я использовал аналогичный подход для отображения тостовых сообщений, но там мне просто нужно было показать и скрыть тост.Здесь я хотел бы иметь обратный вызов к компоненту, который вызвал диалог, если нажата «да».