Reactjs 如何从useState更改为useReducer

下面的代码我正试图将其转换为useReducer，但有几件事我无法理解。在下面的代码中，handleClick更新状态并调用其他函数以执行进一步的操作。在useReducer中，我可以更新状态，但不知道如何调用其他函数

 const handleClick = (id) =>{
    let matchedEl = userArray.find(el => el.pic == picArray[id].pic)
    if(matchedEl){
        alert('game over')`
        setUserArray([]);
        gameOver();
    } else {
        let picObj = { "pic": picArray[id].pic}
        setUserArray([...userArray, picObj]) //updates the state
        if(userArray.length == 12){
            setUserArray([])
            scoreFn();
            return;
        }
        let shuffledArray = shufflePicArray();
        setPicArray([...shuffledArray]) //updates the state
        scoreFn();
    }   
}

return (
        <Container >
                        <Card onClick={() => handleClick(id)} /> </Card>
            </Row>             
        </Container>)}
  

consthandleclick=（id）=>{
让matchedEl=userArray.find（el=>el.pic==picArray[id].pic）
if（matchedEl）{
警报（“游戏结束”）`
setUserArray（[]）；
gameOver（）；
}否则{
设picObj={“pic”：picArray[id].pic}
setUserArray（[…userArray，picObj]）//更新状态
if（userArray.length==12）{
setUserArray（[]））
scoreFn（）；
返回；
}
设ShuffleArray=ShuffleArray（）；
setPicArray（[…shuffledArray]）//更新状态
scoreFn（）；
}   
}
返回(
handleClick（id）}/>
)}

与useReducer

const initialState = {
    picArray: pics,
    userArray: []
}
function reducer(state, action){
    switch(action.type){
        case "handleClick" :
        {
            let id = action.payload;
            const shuffledArray = state.picArray.sort( () => Math.random() - 0.5)
            let matchedEl = state.userArray.find(el => el.pic == state.picArray[id].pic)
            console.log(matchedEl)
            let picObj;
            if(!matchedEl){
                    picObj = { "pic": state.picArray[id].pic}
                } else {
                    alert('game over')
                    gameOver(); //can't call the function is not defined yet
                }
        return{
            state,
           picArray:[...shuffledArray], //this works
           userArray:[...state.userArray, picObj] //this works
        }
    }
    default:
      return state;
    }
}

const Newmain = ({scoreFn, gameOver}) => {
    const [state, dispatch] = useReducer(reducer, initialState)

return(
<card onClick={() =>dispatch({type:'handleClick', payload:id})} />
)}```


The useState handleClick function does a lot more things and how to reproduce while using useReducer. 

const initialState={
picArray:图片，
用户数组：[]
}
功能减速机（状态、动作）{
开关（动作类型）{
案例“handleClick”：
{
设id=action.payload；
const shuffledArray=state.picArray.sort（（）=>Math.random（）-0.5）
让matchedEl=state.userArray.find（el=>el.pic==state.picArray[id].pic）
console.log（matchedEl）
让picObj；
如果（！matchedEl）{
picObj={“pic”：state.picArray[id].pic}
}否则{
警报（“游戏结束”）
gameOver（）；//无法调用尚未定义的函数
}
返回{
国家,，
picArray:[…shuffledArray]，//这很有效
userArray:[…state.userArray，picObj]//这是有效的
}
}
违约：
返回状态；
}
}
const Newmain=（{scoreFn，gameOver}）=>{
const[state，dispatch]=useReducer（reducer，initialState）
返回(
分派（{type:'handleClick'，payload:id}）}/>
)}```
useState handleClick函数在使用useReducer时做了很多事情，以及如何进行复制。

要回答您的问题，您可以添加

consthandleclick=（id）=>{
//在这里做事
分派（{type:'handleClick'，负载：id}）
}