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

Question

我尝试使用useDispatch钩子调用此操作，它给了我这个警告。我也用Redux-thunk。

ProductScreen.js

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;

ProductActions.js

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,
});
}
};

Answer 1

在这里，我能够解决从这里删除compose组件的问题，所以通过制作，如果从右向左运行该函数，则需要使用Compose

const store = createStore(reducers,initialState, applyMiddleware((thunk)));