Advance State Management using useReducer()

useReducer.js

import React, { useReducer } from 'react';
const cafeReducer = (state , action) => {
	switch(action.type) {
		case 'ADD_ORDER' :
			return { ...state, orders: state.orders + 1 } ;
		case 'REMOVE_ORDER' :
			return { ...state, orders: state.orders - 1 } ;
		default:
			return state;
		}
};

const CafeWithReducer = () => {
		const initialState = {orders: 0 }; // this will be the initialState
		// use the reducer to manage the cafe's state
		const [ state, dispatch ] = useReducer(cafeReducer , initialState);
		
		return ( 
		<div>
		 <h1>Orders in the Café: {state.orders}</h1>
      <button onClick={() => dispatch({ type: 'ADD_ORDER' })}>Add Order</button>
      <button onClick={() => dispatch({ type: 'REMOVE_ORDER' })}>Remove Order</button>
     </div>
		);
};