import { useReducer } from 'react'

// Hook: useReducer
const [estado, disparador] = useReducer((estado, accion) => {
  // Codigo para calcular el nuevo estado basado en la acción
  // nuevoEstado = f(estado, accion)
}, estadoInicial)

// ✍️ Nota: el estado inicial no necesariamente tiene que ser un objecto

// Usos del useReducer

// Podemos usar useReducer usando conocimientos previos de redux
// debido a que useReducer usa una función para calcular el nuevo
// estado tal y cual lo hace redux.

// Por ejemplo: imaginemos que queremos crear un contador usando 
// useReducer para delimitar y tener mas control sobre las acciones
// permitidas para interactuar con el estado.

const [state, dispatch] = useReducer((state, action) => {
  switch(action.type) {
    case 'INCREMENT': {
      return state + 1;
    }
    case 'DECREMENT': {
      return state - 1:
    }
    default: {
      throw new Error(`The ${action.type} is not permitted.`)
    }
  }
}, 0)

// Ahora podemos usar `dispatch` para trabajar sobre nuestro contador
dispatch({ type: 'INCREMENT' })
console.log(state)
dispatch({ type: 'INCREMENT' })
console.log(state)
dispatch({ type: 'DECREMENT' })
console.log(state)

// ✨ Tip: podemos reemplazar la mayoria de casos de uso de redux para
// la gestion de estados locales (dentro del component) y externos mediante
// el uso de useContext y Context API.