0

我有一个将被整个应用程序使用的确认对话框，它在最高层级组件中声明。它连接到 redux，因此每次组件想要打开此模式时，它都会使用要显示的消息和要在确认时再次调度的操作来更新 redux 状态。它可以工作，但动作并不总是普通的对象，有时它是一个处理异步操作的函数。我读到不建议将函数存储在 redux 状态，那我该怎么做呢？

在我的组件下面找到

const ConfirmDialog = 
    ({ isOpen, message, action, dispatchAction, setOpen }) => {

    const close = () => {
        setOpen(false);
    }

    const confirm = () => {
        dispatchAction(action);
        close();
    }

    return (
        <div>
            <Dialog
                open={isOpen}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">
                    {"Are you sure?"} 
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        {message}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={confirm} color="primary">
                        confirm
                    </Button>
                    <Button onClick={close} color="primary"autoFocus>
                        cancel
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

const mapStateToProps = state => ({
    isOpen: Selector.isOpen(state),
    message: Selector.getMessage(state),
    action: Selector.getAction(state)
});

const mapDispatchToProps = dispatch => {
    return {
        setOpen: open => dispatch(Action.setOpen(open)),
        dispatchAction: action => dispatch(action)
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ConfirmDialog);

提前致谢

4

2 回答 2

0

是的，您可以在 redux 商店中保留模式的内容和行为。您可以为对话框创建一个组件并将道具传递给它，例如它应该何时显示，单击确认时将执行的操作以及取消时的操作。

当您使用 redux 时，您需要有相关的操作来确认和取消按钮的单击，以便它会在全局 redux 状态中进行更改

于 2019-09-05T09:57:13.767 回答
0

这取决于您的要求。如果你想在许多组件之间共享相同的确认行为，你应该把它放在 Redux 中。否则，您也可以简单地通过道具来做到这一点：

class Dialog extends React.Component {
    render () {
        return (
            <div className="dialog-wrapper">
                <div className="dialog-description">
                    {this.props.children}
                </div>
                <button type="button" className="dialog-confirm-btn" onClick={this.props.confirmHandler}>Confirm</button>
                <button type="button" className="dialog-cancel-btn" onClick={this.props.cancelHandler}>Cancel</button>
            </div>
        );
    }
}

<Dialog 
confirmHandler={()=>{console.log('confirm')}}
cancelHandler={()=>{console.log('cancel')}}>
    are you sure?
</Dialog>

我个人通常使用道具来这样做，以便对话框可以重复用于所有场景

于 2019-09-05T09:12:29.697 回答