How to use the @dbeining/react-atom.addChangeHandler function in @dbeining/react-atom

},
    errorComponents: {},
    registry: {
      extensions: {},
      pages: {},
    },
    routes: {},
    data: {},
    portals: {},
    modules: [],
  };

  const globalState = Atom.of(extend(defaultState, customState));

  if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PILET !== undefined) {
    addChangeHandler(globalState, 'debugging', ({ current, previous }) => {
      const action = new Error().stack.split('\n')[6].replace(/^\s+at\s+Atom\./, '');
      console.group(
        `%c Piral State Change %c ${new Date().toLocaleTimeString()}`,
        'color: gray; font-weight: lighter;',
        'color: black; font-weight: bold;',
      );
      console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
      console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
      console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
      console.groupEnd();
    });
  }

  return globalState;
}

feeds: {},
    forms: {},
    user: {
      current: undefined,
      features: {},
      permissions: {},
    },
    search: {
      input: '',
      loading: false,
      results: [],
    },
  });

  if (process.env.NODE_ENV !== 'production') {
    addChangeHandler(globalState, 'debugging', ({ current, previous }) => {
      const action = new Error().stack.split('\n')[6].replace(/^\s+at\s+Atom\./, '');
      console.group(
        `%c Piral State Change %c ${new Date().toLocaleTimeString()}`,
        'color: gray; font-weight: lighter;',
        'color: black; font-weight: bold;',
      );
      console.log('%c Previous', `color: #9E9E9E; font-weight: bold`, previous);
      console.log('%c Action', `color: #03A9F4; font-weight: bold`, action);
      console.log('%c Next', `color: #4CAF50; font-weight: bold`, current);
      console.groupEnd();
    });
  }

  return globalState;
}