时间戳

首页 > 解决方案 > 如何将我的 react-redux 应用程序限制为仅在所需数据不可用时发出 API 请求？

reactjs - 如何将我的 react-redux 应用程序限制为仅在所需数据不可用时发出 API 请求？

问题描述

好的，所以我有一个产品页面，我在其中向 API 发出请求以获取数据。现在，如果我单击特定产品，则会打开另一个页面，其中包含所述产品详细信息。如果我回到产品页面，它会再次向 API 发出请求，即使我的 redux 开发工具显示我的产品处于 redux 状态，所以我不需要发出另一个 API 请求。所以，如果我有产品在我的状态，我想做的是不发出 API 请求。

这是产品页面代码的样子：

const dispatch = useDispatch();

  const productList = useSelector(state => state.productList);
  const { loading, error, products } = productList;

  useEffect(() => {
    if(products.len===0 || products.len===undefined)
      dispatch(listProducts());
  }, [])

listProducts()看起来像这样：

export const listProducts = () => async (dispatch) => {
  try {
    dispatch({ type: PRODUCT_LIST_REQUEST })
    
    const { data } = await axios.get("http://localhost:5000/api/products");

    dispatch({
      type: PRODUCT_LIST_SUCCESS,
      payload: data
    })

  } catch (error) {
    dispatch({
      type: PRODUCT_LIST_FAIL,
      payload: error.response && error.response.data.error ? error.response.data.error : error.message
    })
  }
}

而且，这是相关的减速器：

export const productListReducer = (state = { products: [] }, action) => {
  switch (action.type) {
    case PRODUCT_LIST_REQUEST:
        return { loading: true, products:[] }
    case PRODUCT_LIST_SUCCESS:
      return { loading: false, products: action.payload }
    case PRODUCT_LIST_FAIL:
      return { loading: false, error: action.payload }
    default:
      return state;
  }
}

标签： reactjsreact-redux

解决方案

列出产品

   export const listProducts = () => async (dispatch, state) => {
  
   try {
   dispatch({ type: PRODUCT_LIST_REQUEST })
   const { data } = await axios.get("http://localhost:5000/api/products");

   dispatch({
    type: PRODUCT_LIST_SUCCESS,
    payload: data
   })

} catch (error) {
  dispatch({
    type: PRODUCT_LIST_FAIL,
    payload: error.response && error.response.data.error ? error.response.data.error : error.message
  })
  }
}

产品页面

const dispatch = useDispatch();

const productList = useSelector(state => state.productList);
const { loading, error, products } = productList;

useEffect(() => {
  if(products.length===0)
    dispatch(listProducts());
}, [])

推荐阅读