feat(ui): make debug logger middleware configurable

While troubleshooting an issue with this middleware, I found the inclusion of the nextState and diff to be very noisy. It's now a function that accepts some options to configure the output, and returns the middleware.

Author: psychedelicious

invokeai/frontend/web/src/app/store/middleware/debugLoggerMiddleware.ts

@@ -7,12 +7,20 @@ import { diff } from 'jsondiffpatch';
 /**
  * Super simple logger middleware. Useful for debugging when the redux devtools are awkward.
  */
-export const debugLoggerMiddleware: Middleware = (api: MiddlewareAPI) => (next) => (action) => {
-  const originalState = api.getState();
-  console.log('REDUX: dispatching', action);
-  const result = next(action);
-  const nextState = api.getState();
-  console.log('REDUX: next state', nextState);
-  console.log('REDUX: diff', diff(originalState, nextState));
-  return result;
-};
+export const getDebugLoggerMiddleware =
+  (options?: { withDiff?: boolean; withNextState?: boolean }): Middleware =>
+  (api: MiddlewareAPI) =>
+  (next) =>
+  (action) => {
+    const originalState = api.getState();
+    console.log('REDUX: dispatching', action);
+    const result = next(action);
+    const nextState = api.getState();
+    if (options?.withNextState) {
+      console.log('REDUX: next state', nextState);
+    }
+    if (options?.withDiff) {
+      console.log('REDUX: diff', diff(originalState, nextState));
+    }
+    return result;
+  };