Logs a reducer that uses Immer

logImmerReducer.ts

import { Reducer } from "react";
import { current } from "immer";

import { diff } from "helpers/diff"; // See my "Object diff" gist

const quickPayloadTypes = ["boolean", "number", "string"];

export function logImmerReducer(reducer: Reducer<any, any>): Reducer<any, any> {
  if (process?.env?.JEST_WORKER_ID) return reducer;

  return function (state: any, action: any): any {
    const isQuickType = quickPayloadTypes.includes(typeof action.payload);

    if (isQuickType) {
      console.groupCollapsed(`dispatch: ${action.type}: ${action.payload}`);
    } else {
      console.groupCollapsed(`dispatch: ${action.type}`);
      if (action.payload !== undefined) {
        console.log(`  payload:`, action.payload);
      }
    }

    const prevState = current(state);
    const nextState = reducer(state, action);

    console.log(`  delta:`, diff(prevState, current(state), true));
    console.groupEnd();

    return nextState;
  };
}