Invalid hook call. React hooks

Question

error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons

Hello I am trying to use useDispatch in my action but it is generating this error from invalid hoook

I can't solve it

can anybody help me?

my action

import {FETCH_FAIL,FETCH_LOADING,FETCH_SUCESS} from './actionType';
import api from '../../../services/api';
import { useDispatch } from "react-redux";

const FetchSucess = data  => (console.log(data),{
    type:FETCH_SUCESS,
    data
});
const FetchFailed = error  => ({
    type:FETCH_FAIL,
    error
});
const isLoadingFetch = () => ({type: FETCH_LOADING})


export default function AllProducts  () {
    const dispatch = useDispatch()
    dispatch(isLoadingFetch());
    // fetching data
    api.get('/products')
        .then( response => { dispatch(FetchSucess(response.data))})
        .catch( err => { dispatch(FetchFailed(err.message));});
}

my component

import React, { useState, useEffect } from 'react';

export default function Cards() {
        useEffect(() => {
          // This will be invoked only once.
          getAllProducts();
        }, []);

        const classes = useStyles();
        const classes2 = useStyles2();

        const products = useSelector(state => state.data.filteredProducts);



        return (

            <div className="App">
            <Container maxWidth="md" className={classes.root}>
            <Grid container md={4} spacing={1} ></Grid>
            <Grid container md={8} spacing={1} alignItems={"center"}>
            {products.map(product => (
                <Grid item lg={4} md={4} sm={12} xs={12}>
          <Card className={classes2.card}>
              <CardMedia
                className={classes2.media}
                image={
                  "https://www.theclutch.com.br/wp-content/uploads/2019/11/skins-csgo-neymar.jpg"
                }
              />
              <CardContent className={classes2.content}>
                <Typography
                  className={classes2.name}
                  variant={"h6"}
                  gutterBottom
                >
                  {product.name}
                </Typography>
                <Typography
                  className={classes2.price}
                  variant={"h1"}
                >
                 {util.formatCurrency(product.price)}
                </Typography>
              </CardContent>
            </Card>
                </Grid> 
            ))}
            </Grid>
            </Container>
          </div>
        );
    }

Answer 1

Based on this comment above:

All product is my action

If AllProducts is a Redux action that needs to perform an async operation and dispatch other actions in response to that operation, there's a convention available by which Redux will pass dispatch as a function argument. The action just needs to return a function which accepts that argument. For example:

export default function AllProducts () {
    return function(dispatch) {
        dispatch(isLoadingFetch());
        // fetching data
        api.get('/products')
            .then( response => { dispatch(FetchSucess(response.data))})
            .catch( err => { dispatch(FetchFailed(err.message));});
    }
}

There's no need to use the hook, that's only necessary within React Function Components or within other hooks (which themselves are used within React Function Components).