Hooks can only be called inside of the body of a function component redux-CodePudding

I am new to react.in my new project I am getting an error after using redux in the project. The app was working perfectly before integrating redux to it. i have added the store,action and reducer files and when i try to add it to a component its showing me this error.

Here is the funtion that i want to add redux to.

function Addproduct() {

const navigate = useNavigate();

const { values, setFieldValue, errors, touched, handleBlur, handleChange, handleSubmit} = useFormik({
    initialValues: initialValues,
    validationSchema: addproductSchema,
    onSubmit: (vḁl̥u̥es,{resetForm}) => {
        
        console.log('vḁl̥u̥es: ', vḁl̥u̥es);
        resetForm()
        
    }
})



const PostAdd = async (e) => {
    e.preventDefault();

    const products=useSelector((state)=> state)
    const dispatch=useDispatch()

    const { brandname, productname, picture, quantity, price, description } = values;

    const email = localStorage.getItem('email')

    await axios.post("http://localhost:5000/addproduct", {
        brandname, productname, quantity, price, description, email
    })

        .then((response) => {
            console.log(response.data);
            window.alert("Product added successfully")
            dispatch(addProduct(response.data))
        })
        .catch((err) => {
            console.log(err)
            console.log(err.response)
            window.alert("Error adding Product Details")
        })
}

Reducer file:

const initialState = {
products: []
}


 export const productReducer = 
 (state=initialState, { type, payload }) => {
  switch (type) {
    case ActionTypes.ADD_PRODUCTS:
        return {...state,products:payload}
    default:
        return state;
}
}

Action file:

export const addProduct = (products) =>{
return {
    type:ActionTypes.ADD_PRODUCTS,
    payload:products
    
}
}

i have no idea what am i doing wrong here.

my react-dom version is 18.2..

Any help is much appreciated. Thank you.

CodePudding user response：

Ok, I think I see now, AddProduct is the React component and you are trying to use some React hooks in the PostAdd function. just move the hooks out to the function component body.

Example:

function Addproduct() {
  const products = useSelector((state) => state); // <-- here
  const dispatch = useDispatch();                 // <-- here

  const navigate = useNavigate();

  const {
    values,
    setFieldValue,
    errors,
    touched,
    handleBlur,
    handleChange,
    handleSubmit,
  } = useFormik({
    initialValues: initialValues,
    validationSchema: addproductSchema,
    onSubmit: (vḁl̥u̥es, { resetForm }) => {
      console.log('vḁl̥u̥es: ', vḁl̥u̥es);
      resetForm();
    }
  });

  const postAdd = async (e) => {
    e.preventDefault();

    const { brandname, productname, picture, quantity, price, description } = values;

    const email = localStorage.getItem('email')

    await axios.post("http://localhost:5000/addproduct", {
      brandname, productname, quantity, price, description, email
    })
      .then((response) => {
        console.log(response.data);
        window.alert("Product added successfully")
        dispatch(addProduct(response.data))
      })
      .catch((err) => {
        console.log(err)
        console.log(err.response)
        window.alert("Error adding Product Details")
      });
  };