Snippet

function withLogs<S, A extends { type: string; data: any }>(reducer: (state: S, action: A) => S): typeof reducer {
  return (state, action) => {
    const result = reducer(state, action);
    console.groupCollapsed(action.type);
    console.log('Action Data', action.data);
    console.log('Result', result);
    console.groupEnd();
    return result;
  };
}
 

Usage

-const reducer = (state: State, action: Action) => {/* ... */}
+const reducer = withLogs((state: State, action: Action) => {/* ... */})
 
// ...
const [state, dispatch] = useReducer(reducer, defaultState);