redux-logger for useReducer

component.jsx

import { logger } from "./logger";
import React, { useReducer } from "react";

const reducer = (state, action) => state;
const initialState = {};

export const Component = () => {
  const [state, dispatch] = useReducer(logger(reducer), initialState);
  
  return <div></div>;
}

logger.js

export const logger = (reducer) => {
  return (state, action) => {
    console.log("%cPrevious State:", "color: #9E9E9E; font-weight: 700;", state);
    console.log("%cAction:", "color: #00A7F7; font-weight: 700;", action);
    console.log("%cNext State:", "color: #47B04B; font-weight: 700;", reducer(state, action));

    return reducer(state, action);
  };
};