nedux-logger/src/logger.ts

the next redux state management

import { Middleware } from 'nedux';

const GLOBAL_STATE: { [key: string]: any } = {};
const DEVTOOL_INSTANCE =
  (process.env.NODE_ENV as string) === 'development' &&
  window &&
  // @ts-ignore
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
  // @ts-ignore
  window.__REDUX_DEVTOOLS_EXTENSION__.connect({
    instanceId: '@nedux',
  });

export const logger = <T, K extends keyof T = keyof T>(
  storeName: string,
): Middleware<T, K> => store => {
  if (!DEVTOOL_INSTANCE) {
    return;
  }

  const FORMATTED_STORE_NAME = storeName.toUpperCase();
  GLOBAL_STATE[storeName] = {};

  store.subscribe(
    '',
    (value, key) => {
      const type =
        key in GLOBAL_STATE[storeName]
          ? `[${FORMATTED_STORE_NAME}] UPDATE ${key}`
          : `[${FORMATTED_STORE_NAME}] INIT ${key}`;
      DEVTOOL_INSTANCE.send(
        {
          type,
          payload: value,
        },
        GLOBAL_STATE,
      );
      GLOBAL_STATE[storeName] = { ...GLOBAL_STATE[storeName], [key]: value };
    },
    { withInitialValue: true },
  );
};