使用 Redux 在 React 中调度操作的问题

Posted 2023-02-22

【中文标题】使用 Redux 在 React 中调度操作的问题

【英文标题】：Problem on Dispatching Actions in React Using Redux

【发布时间】：2020-10-04 10:29:51

【问题描述】：

我有一个可重复使用的对话框。我只有一个对话框用于确认注销和删除。 我的问题是注销，一旦我确认注销，触发的操作就是删除。 我放了一个 console.log console.log("SUCCESS LOGOUT") console.log("DELETE USER SUCCESS"); 来查看是否成功触发了哪些操作及其删除操作。我将如何解决这个问题？谢谢。

查看此链接

CLICK HERE

对话框

    const ReusableDialog = (
      title,
      details,
      open,
      type,
      onAgree,
      onDisagree
    ) => 
      return (
        <div>
          <Dialog
            open=open
            TransitionComponent=Transition
            keepMounted
            onClose=onDisagree
            aria-labelledby="alert-dialog-slide-title"
            aria-describedby="alert-dialog-slide-description"
          >
            <DialogTitle id="alert-dialog-slide-title">
              <span>
                Are you sure you want to title details?.name
              </span>
            </DialogTitle>
            <DialogActions>
              <Button variant="contained" size="small" onClick=onDisagree>
                Cancel
              </Button>
              <Button variant="contained" size="small" onClick=onAgree>
                Confirm
              </Button>
            </DialogActions>
          </Dialog>
        </div>
      );
    ;

export default ReusableDialog;

【参考方案1】：

同时打开两个对话框。 当您使用 global single 状态进行对话框时，正在打开两个对话框，一个来自 users.js，另一个来自 navbar.js。

它们是重叠的，因此您看不到它们为其中一个添加大标题然后查看。

为什么你需要一个全局状态来进行对话？ 当地的州应该可以解决您的问题。

【讨论】：

他是对的，使用全局状态，您可以使用相同的值打开两个对话框，但用户的与导航栏的重叠。如果您只想打开一个特定的对话框，您应该使用该特定对话框的本地状态。另一方面，如果您想在您的应用程序中只有一个对话框，也许您应该考虑在导航栏和用户处删除它们，并将其添加到您的根目录，如果是这样，请将确认处理程序以及参数传递给对话框。

只是要清楚一点：尽管当您单击导航栏时，您会在对话框中看到导航栏的文本，但实际上您看到的是用户的对话框，因为您为两者传递了相同的文本。无论您在哪里点击，前面都有用户对话框，后面有导航栏。