alternative to call dispatch from a exported function - reactjs

Question

I am getting the error
React Hook "useDispatch" is called in function "move" which is neither a React function component or a custom React Hook function
I have a component boardSquare which imports and calls handleMove
import { handleMove } from './Game'
export default function BoardSquare({ piece, black, position,isFromSquare,isToSquare}) {
handleMove(value)
}
and inside inside game.js which holds handleMove
there is also imports chess.js which provides a string value
//game.js
import * as Chess from 'chess.js'
const chess = new Chess()
export function handleMove() {
const chessFen = chess.fen()
const dispatch = useDispatch();
dispatch(setFen(chess.fen()))
}
obviously i can't call dispatch there though i need an alternative as eventually i want to do the following
which is
inside Gameapp.js
have
function GameApp() {
const fen = useSelector(state => state.fen)
const [board, setBoard] = useState([])
useEffect(() => {
setBoard(fen
}, [fen])
}
return (
<Board board={board}
/>
)
because i want to update Board with the fen value when it is called in game.js

Answer 1

You can get the function dispatch in your component BoardSquare and use it as a callback to handleMove :
export default function BoardSquare({ piece, black, position,isFromSquare,isToSquare}) {
const dispatch = useDispatch();
return <div onClick={(value) => handleMove(value, dispatch)}/>
}
function handleMove(dispatchFunction) {
const chessFen = chess.fen()
const dispatch = useDispatch();
dispatchFunction(setFen(chess.fen()))
}
You could also return the value to dispatch from handlemove and dispatch it in your component, which might look cleaner and be easier to test
export default function BoardSquare({ piece, black, position,isFromSquare,isToSquare}) {
const dispatch = useDispatch();
return <div onClick={(value) => dispatch(handleMove(value))}/>
}
function handleMove(value) {
const chessFen = chess.fen()
return setFen(chess.fen())
}
As an aside, please try to make your code more coherent/readable when looking for help, you probably tried to be succint, but your component BoardSquare doesn't make sense as you wrote it in your question, handlemove is given a value not present in its signature, and the indentation is off

Answer 2

I just made another function called getFen() and did it like so
export function getFen(){
return chess.fen()
}
import getFen()
handlemove(){
fen = getFen()
dispatch(setFen(fen)
}