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;
}

现在在我的单个组件中，该组件由connect包裹着，我想在其中显示确认对话框，我可以调用 showConfirmationDialog作为承诺即

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

如何实现这种功能？我是redux的新手，已经掌握了一些基础知识。我曾经使用过类似的方法来显示烤面包消息，但是我只需要显示和隐藏烤面包。如果要按“是”，我想在这里回调到调用对话框的组件。

使用React Redux进行确认对话框渲染

0 个答案: