import React, {useReducer} from "react";
import * as ReactDOM from "react-dom/client";
const initialState = 0;
const reducerFunc = (countState: number,action: string) => {
switch (action){
case 'up':
return countState + 1;
case 'down':
return countState - 1;
default:
return countState;
}
}
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
function App(){
const [count,dispatch] = useReducer(reducerFunc,initialState);
return(
<div>
<h1>カウントアップ</h1>
<button onClick={()=>dispatch('up')}>UP</button>
<button onClick={()=>dispatch('down')}>down</button>
<h2>{count}</h2>
</div>
);
}
表示画面サンプル