问TypeError:调用dispatch()时，dispatch不是函数错误

EN

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Loader from "../Loader";
import Product from "../parts/Products";
import { listProducts } from "../../store/actions/productActions";


import "../../App.css";
import "../parts/Products.css";




function ProductScreen()  {

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

  useEffect(()=> {
    dispatch(listProducts())
  },[dispatch]);

  return(
    <div>
      {loading ? (<Loader />) :(
        <div className="row center">
          {products.map((product)=>(
            <Product key={product._id} product={product} />
          ))}
        </div>
      )}
    </div>
  );

  
}

export default ProductScreen;

import Axios from 'axios';
import {
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL,
    PRODUCT_DETAILS_REQUEST,
    PRODUCT_DETAILS_SUCCESS,
    PRODUCT_DETAILS_FAIL 
} from '../constants/ProductConstant.js';

export const listProducts = ()=> async (dispatch)=> {
    dispatch({
        type: PRODUCT_LIST_REQUEST,
      });
      try {
        const { data } = await Axios.get('/api/products');
        dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
      } catch (error) {
        dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message });
      }
}

export const detailsProduct = (productId) => async (dispatch) => {
    dispatch({
      type: PRODUCT_DETAILS_REQUEST,
      payload: productId,
    });
    try {
      const { data } = await Axios.get(`/api/products/${productId}`);
      dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data });
    } catch (error) {
      dispatch({
        type: PRODUCT_DETAILS_FAIL, payload: error.response && error.response.data.message ?
          error.response.data.message : error.message,
      });
    }
  };