const {useReducer} = React

const reducer = (state, action) => {
  switch(action.type) {
    case "INSC":
      return {...state, data: ++state.data}
    case "DESC":
      return {...state, data: --state.data}
    default:
      return state
  }
}

const initState = {
  data: 0
}

function TestReducer(props) {
    const [state, dispatch] = useReducer(reducer, initState)
    
    const add = () => {
      dispatch({type: "INSC"})
    }
    
    const substract = () => {
      dispatch({type: "DESC"})
    }
    
    return (
      <div>
        <div>{state.data}</div>
        <button onClick={add}>+1</button>
        <button onClick={substract}>-1</button>
      </div>
    )
}

ReactDOM.render(<TestReducer />, document.getElementById("root"))