React context api, reducers, hooks

ComoUsarReducer.js

import React, { useReducer } from "react";

import * as TheReducer from "./Context/context";


function ComoUsarReducer() {
	const [state, dispatch] = useReducer(
		TheReducer.default,
		TheReducer.initialState
	);

	return (
        <>
        <div>{state.contador}</div>
        <div className="buttons">
          <button onClick={() => dispatch({ type: "SUMAR_1" })}>  Sumar 1 </button>
          <button onClick={() => dispatch({ type: "RESTAR_1" })}> Restar 1 </button>
        </div>
      </>
	);
}

export default App;

context.js

export const initialState = {
	loading: false,
	data: [],
	error: null,
	contador: 0
};

const reducer = (state = initialState, action) => {
	const { contador } = state;

	switch (action.type) {
		case "SUMAR_1":
			return Object.assign({}, state, {
				contador: contador + 1
			});
		case "RESTAR_1":
			return Object.assign({}, state, {
				contador: contador - 1
			});

		default:
			return state;
	}
};

export default reducer;