reactjs - 如何正确设置获取标志

Question

我正在尝试设置获取标志，但我遇到了问题。

我有一个获取状态值

status: 'idle' | 'loading' | 'succeeded' | 'failed'

另外，我有一个 thunk，我将状态设置为正在加载，然后在加载数据时将其设置为成功，并在 catch 中设置为失败。

 export const getProducts = () => async dispatch => {
  try {
    dispatch(setFetchingStatus('loading'))
    const response = await productsAPI.getProducts()
    dispatch(setProducts(response))
    dispatch(setFetchingStatus('succeeded'))
  } catch {
    dispatch(setFetchingStatus('failed'))
  }
}

然后在 UI 我有一些简单的检查

  if(fetchingStatus === 'loading') return (<div>Loading...</div>)
  else if(fetchingStatus === 'succeeded') return (<div>Content...</div>)
  else if(fetchingStatus === 'failed') return (<div>Error...</div>)

问题是，当我将一个组件从 Products 更改为 Cart 时，一开始我的获取状态等于成功。发生这种情况是因为成功加载数据时设置的最后一个状态是成功的。我正在使用反应路由器。我有一个想法，可以在使用 useEffect 卸载组件时将状态设置为空闲，但在我看来这不是正确的方法。

标签： reactjsreact-reduxfetchreact-thunk