react中如何使用useReducer?

react中如何使用useReducer？

 

 

import React,{useReducer} from 'react';

// redux必須的內容
// store reducer

/* 
    useReducer使用？
    1.創建 數據倉庫store 和 管理者reducer
    2.通過useReducer(reducer,store)來state和dispatch
*/
const store = {
    num:10
}

const reducer=(state,action) =>{
    switch (action.type) {
        case 'changeNum':

            return {
                ...state,
                num:action.num
            }
            
        default:
            return {
                ...state
            };
    }

}

export function Reducer(){

   const [state,dispatch] =  useReducer(reducer,store);

    return(
        <div onClick={()=> dispatch({
            type:'changeNum',
            num:100
        })}>
            這是一個函數式組件---{state.num}
        </div>
    )
}