React useReducer
import React, { useReducer } from "react";
import Button from '@mui/material/Button';
type StateType = { count: number };
const initialState: StateType = { count: 0 };
type ActionType = { type: 'increment' | 'decrement' | 'reset' };
function reducer(state: StateType, action: ActionType) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return initialState;
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<Button variant="contained" onClick={() => dispatch({ type: 'decrement' })}>-</Button>
<Button variant="contained" onClick={() => dispatch({ type: 'increment' })}>+</Button>
<Button variant="contained" onClick={() => dispatch({ type: 'reset' })}>RESET</Button>
</>
);
}
export default Counter;