redux 中等待调度的方法

Question

我对我的项目有疑问哪种方法是正确的。我有组件，我想通过 redux thunk 从 API 获取一些数据，并根据响应继续流程。

方法1

const data = useAppSelector(selectControlData)

useEffect(() => {
  //logic
}, [data])

const handleSubmit = () => {
 dispatch(getControlData(id))
}

方法2

const data = useAppSelector(selectControlData)

const handleSubmit = () => {
 const response = await dispatch(getControlData(id))
 //logic based on response
}

在更简单的组件中通常使用第一种方法，但在更复杂的组件中它会导致可读性的损失`

Answer 1

我认为使用第二种方法更好 如果需要在不同的事件上调用其他一些 api，您可以将业务逻辑放在不同的位置。

const data = useAppSelector(selectControlData)

const handleSubmit = async () => {
 const response = await dispatch(getControlData(id))
 //logic based on response
}

同样，你的组件中可以有多个 useEffects，但我建议保持它的简洁，这样将来会更容易理解。 ：）