How to make "dispatch" as export function in React JS?

Question

This is my dispatch function:

DispatchRecipeID.js

    import { useDispatch } from "react-redux";
    import { UpdateRecipeID } from "../store/action/recipeId";
    
    const DispatchRecipeID = (id) => { 

      const dispatch = useDispatch(); // dispatch
    
      dispatch(UpdateRecipeID(id));
    
    };
    
    export default DispatchRecipeID;

Now I am use this DispatchRecipeID() function in another React JS file.

Navbar.js

        import React, { useState } from "react";
        import DispatchRecipeID from "../../middleware/DispatchRecipeID";

    
    const Navbar = () => {

            // inputbox value
            const [input, setInput] = useState("");
            // get search item info from inputID. using inputID.id
            const [inputID, setInputID] = useState(null);

            // search function
            const dispatchRecipeID = ()=>{
              if(input !== "" && input !== null ){
               DispatchRecipeID(inputID.id)
              }
              return
            }
          
            // ....... some code
            return(
                <div>
                  <input type="text" value={input}   onChange={(event,value)=>{ setInputID(value) }} /> 
                  <button onClick={dispatchRecipeID(input)} >Search</button> 
                </div>
            )
            
  }

  export default Navbar;

But I get error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Full Error Here:

react-dom.development.js:14906 Uncaught 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:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at Object.throwInvalidHookError (react-dom.development.js:14906:1) at useContext (react.development.js:1504:1) at useReduxContext (useReduxContext.js:21:1) at useStore (useStore.js:20:1) at useDispatch (useDispatch.js:17:1) at DispatchRecipeID (DispatchRecipeID.js:6:1) at searchFunc (Navbar.js:71:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1)

How to fix this error? And I want use DispatchRecipeID() function at "3 or 4 JS" files like as Navbar.js

please help me, and thanks :)

Do what the message says :D Call Hooks from React function components.. Call Hooks from custom Hooks . reactjs.org/docs/hooks-rules.html — madflow
– madflow, Commented Jan 28, 2022 at 19:43
hi @happy-coconut. have a nice day! I change this method, you just see my code: github ---------- and read my blog about it: dev blog ----- but if you want to make "dispatch" as export function in React JS, you can use redux thunk ------ if you have any doubt please contact me on Mail: [email protected] — Jackson Kasi
– Jackson Kasi, Commented May 28, 2022 at 13:04

Artem Rudenko · Accepted Answer · 2022-06-28 21:39:01Z

1

DispatchRecipeID.js

import { store } from 'redux/store';

instead of

import { useDispatch } from "react-redux";

and call dispatch as a key in store

const DispatchRecipeID = (id) => { 
    store.dispatch(UpdateRecipeID(id));
};

edited Jun 28, 2022 at 21:39

answered Jun 26, 2022 at 20:43

Artem Rudenko

113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rman__ · Accepted Answer · 2022-01-28 20:25:17Z

0

just for reminding the one of the important rules in the react hooks that you can't use hooks inside the nested functions and they will not work if you brake this rule

check your all component

edited Jan 28, 2022 at 20:25

answered Jan 28, 2022 at 19:50

Rman__

1852 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to make "dispatch" as export function in React JS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related