Javascript 如何使用其他setState管理useReducer，以及如何管理DOM focus等非纯操作？

我读过，减速机应该是纯功能的

然后我有两个问题：如果其他设置状态与减速器相连，如何管理它们？以及如何处理DOM操作，比如焦点HTML元素

为了说明这一点，这是我使用非纯减速机的代码：

const ActDeclaration = () => {
   const [errors, setErrors] = useState({})
   const refPersonType = useRef()

   const reducer = (state, action) => {
      switch (action.type) {
         case "internalNumber":
            return { ...newState, internalNumber: action.payload }
         case "profile": {
            setErrors({}) // HERE
            const errors = hasErrors(newState, setErrors)

            if (!isEmpty(errors)) {
               setErrors(errors) // HERE

               refPersonType.current.scrollIntoView({ // HERE
                  behavior: "smooth",
                  block: "start",
               })
            }
            return newState
         }
         default:
            return newState
      }
   }

   const [state, dispatch] = useReducer(reducer, {})

我使用

setErrors

修改负责显示/管理错误的状态变量

这可能会产生副作用吗？实际上，reducer中的setErrors是否会触发重新渲染

在reducer的内部状态中管理错误状态对我来说并不理想，因为

setErrors

也由submit函数调用，它不依赖于reducer，这就是为什么我发现分解错误是一个好主意

第二个问题是

ref

焦点。我怀疑这也是一种副作用。如何处理？我是这样做的，因为我有一个按钮，它在单击事件时调用分派函数，然后调用reducer函数。所以，reducer似乎是一个合适的人选来做焦点工作

---

谢谢你的想法

对于

配置文件

操作来说，检查错误并同时在其中滚动似乎是一个错误的位置

您可以在

useffect

中的reducer之外或在事件处理程序中执行此操作，因为没有对

概要文件进行状态操作