WithCustomHookDestroyerOfThunks.tsx

export const useGetProducts = (): [Product[] | undefined, boolean, unknown] => {
  const { data, error, isLoading } = useQuery(ApiRoutes.Products, () =>
    api.getProducts().then((res) => res)
  );
  const products = useAppSelector(selectProducts);
  const dispatch = useAppDispatch();

  useEffect(() => {
    if (data) {
      dispatch(setProducts(data));
    }
  }, [data, dispatch]);

  return [products, isLoading, error];
};

const ProductsList = (props: BoxProps) => {
  const [products, isProductsLoading] = useGetProducts();

  if (isProductsLoading) {
    return <ProgressBar />;
  }

  return (
    <Box {...props}>
      {products?.map((product) => (
        <ProductCard product={product} key={product.id} />
      ))}
    </Box>
  );
};

export default ProductsList;