use-state-reducer.ts

import { Dispatch, useMemo, useReducer } from 'react'

// useStateReducer action type
type ActionType<S> = Partial<S> | ((params: S) => Partial<S>)

// useStateReducer reducer type
type Reducer<S> = (state: S, action: ActionType<S>) => S

// Default reducer. Override the old value with the action
export function stateReducer<S>(state: S, action: ActionType<S>): S {
	return action instanceof Function ? { ...state, ...action(state) } : { ...state, ...action }
}

/**
 * Custom hook for state management
 *
 * @param initialState: Should be an object
 */
function useStateReducer<S>(initialState: S): [state: S; dispatch: Dispatch<ActionType<S>>] {
	// `useReducer` is better than `useState` when we have a state object
	const [state, dispatch] = useReducer<Reducer<S>>(stateReducer, initialState)
	// Memoize value for performances
	return useMemo(() => [state, dispatch], [state, dispatch])
}

export default useStateReducer