Cant use a useDispatch inside a useEffect-CodePudding

So Im receiving the following error when using a useDispatch inside a useEffect

Line 58:5: React Hook "useDispatch" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks

I have a component like follows

import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';

const Component = () => {
 const images = useSelector(getImages)

  useEffect( () =>  {
    useDispatch(myModules.actions.setMaskVisible(true));
  }, [images]);

}

setMaskVisible is pretty much

export const SET_MASK_VISIBLE = 'caps/SET_MASK_VISIBLE';
const setMaskVisible = payload => {
  return {
    type: SET_MASK_VISIBLE,
    payload
  };
};

export default { setMaskVisible }

Im basically trying to change a redux value, when images update. Why desnt it work?

CodePudding user response：

Have a look at the documentation. You call useDispatch to get a function and call that function:

import { useSelector, useDispatch } from 'react-redux';
import { myModules } from '#/redux/modules';

const Component = () => {
 const images = useSelector(getImages)
 const dispatch = useDispatch();

  useEffect( () =>  {
    dispatch(myModules.actions.setMaskVisible(true));
  }, [images]);

}