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

As the error states, hooks are meant to be used inside a React Function Component. AllProducts is just a function, it's not a React component. What is AllProducts and where/how do you intend to use it? (Currently it's not used at all.) — David
– David, Commented Dec 8, 2019 at 14:09
All product is my action where I use axios to take a route on my back end — Felipe
– Felipe, Commented Dec 8, 2019 at 14:10

David · Accepted Answer · 2019-12-08 14:14:57Z

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).

I tested with this function debugging and it does not enter inside my return
It calls my function all product and does not enter my return function dispatch.
@Felipe: How did you test it? Please show how you're calling your action. (Are you dispatching that call?)
i import : import getAllProducts from '../store/actions/fetch/index' and use useEffects useEffect(() => { getAllProducts(); }, []);
@Felipe: Without using a web socket (which is the preferred approach if possible), a fallback option could be to have an ongoing polling operation from the front-end. Maybe every 30 seconds or so (with setInterval) it checks the back-end for updated information. If possible, once it finds the back-end is working again it should then attempt to re-establish a web socket instead of continuing to poll, as ongoing polling when data rarely updates is inefficient.

Collectives™ on Stack Overflow

Invalid hook call. React hooks

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related