如何对 redux 中的操作完成做出反应答案

【问题标题】：How to react to action completion in redux如何对 redux 中的操作完成做出反应
【发布时间】：2022-11-02 23:55:05
【问题描述】：

在 redux 商店中成功完成操作后，我希望屏幕上出现一个弹出窗口。

我尝试的第一件事是等待调度并检查错误字段

我的组件.jsx

...
const error = useSelect(selectError())
const handleSubmit = async () => {
    await dispatch(myAction(...)))
    if(!error)
        setIsPopupOpen(true);
}
...

我意识到这不起作用，因为函数范围内的错误是在组件的初始渲染中定义的，并且不会反映 redux 存储中的更改。这导致了以下解决方法。

我的组件.jsx

...
const error = useSelect(selectError())
const [actionCompleted, setActionCompleted] = useState();
const handleSubmit = async () => {
    await dispatch(myAction(...)))
    setActionCompleted(true)
}

useEffect(() => {
   if(actionCompleted) {
       if(!error)
           setIsPopupOpen(true);
       setActionCompleted(false);
   }
}, [error, actionCompleted])
...

但这绝对是一种解决方法，而不是实际的解决方案。我考虑将动作结果添加到存储切片的状态中，并采用了以下方法。

StoreSlice.js

const initialState = {
   ...
   actionStatus: 'idle',
   ...
}
createSlice({
   ...
   myAction: (state, action) => {
       if (/* business logic */ ) {
           state.error = 'some error'
           state.actionStatus = 'failure'
       }
   },
   clearMyActionStatus: (state) => {
       state.actionStatus = 'idle'
   }
})

我的组件.jsx

const error = useSelect(selectError())
const [actionCompleted, setActionCompleted] = useState();
const handleSubmit = () => {
    dispatch(myAction(...)))
}

useEffect(() => {
   if(actionStatus === 'success') {
      setIsPopupOpen(true)
      dispatch(clearActionStatus());
   }
}, [actionStatus])

但这对我来说似乎是错误的，在读取后添加一个动作来重置动作状态似乎很笨拙，并且与 redux 中通常使用的动作不同，但我对此可能是错误的。

这个问题让我感到莫名其妙，因为这似乎是一个失败的常见情况，但我想出的所有解决方案似乎都过于复杂。

有没有更简单的方法来处理这种情况，如果没有，哪种方法被认为是最好的？

【问题讨论】：

标签： javascript reactjs redux react-redux redux-toolkit

【解决方案1】：

您是否需要致电setIsPopupOpen(true) 才能让您的弹出窗口正常工作？或者你可以只跟踪 Redux 中的 Popup-open-state 吗？这取决于您的 Popup 实现，但我会采用以下方法：

在 Redux 中有一个类似于“popUpVisible”的布尔值
如果您的操作被处理，则设置为真
在弹出窗口中选择popUpVisible 并使用它来显示/隐藏组件（将其保留在 DOM 中，但仅更改可见性，z-index - 任何需要）
如果弹出窗口关闭，则发送一个将popUpVisble 更改为false 的操作

【讨论】：