如何在 Redux 存储中保留模态的内容和行为?

Question

我有一个确认对话框，将被整个应用程序使用，它是在最高级别的组件中声明的。 它连接到 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);

提前致谢

Answer 1

这取决于您的要求。如果你想在许多组件之间共享相同的确认行为，你应该把它放在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>

我个人通常使用道具来做到这一点，这样对话框就可以在所有场景中重复使用

Answer 2

是的，您可以将模态的内容和行为保留在 redux 存储中。 您可以为对话框创建一个组件，并将 props 传递给它，例如何时应该显示它，单击确认时将执行什么以及取消时将执行什么。

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