Skip to content

Instantly share code, notes, and snippets.

@tolotrasmile
Created June 30, 2023 14:56
Show Gist options
  • Save tolotrasmile/34d338977697381ac839c033d87cfe9b to your computer and use it in GitHub Desktop.
Save tolotrasmile/34d338977697381ac839c033d87cfe9b to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment