How to use the @storybook/addons.addons.getChannel function in @storybook/addons

addons.register(ADDON_ID, api => {
  const ob = Observable(addons.getChannel(), api);

  addons.addPanel(ADDON_PANEL, {
    title: 'JSX',
    render: ({ active }) => 
  });
});

export const jsxDecorator: DecoratorFn = function(
  storyFn: StoryFn>,
  parameters: StoryContext
) {
  const defaultOpts = {
    skip: 0,
    showFunctions: true,
    enableBeautify: true
  };
  const options = {
    ...defaultOpts,
    ...((parameters.parameters && parameters.parameters.jsx) || {})
  } as Required;
  const channel = addons.getChannel();

  const story: ReturnType & VueComponent = storyFn();
  let jsx = '';

  if (story.template) {
    if (options.enableBeautify) {
      jsx = beautifyHTML(story.template, options);
    } else {
      jsx = story.template;
    }
  } else {
    const rendered = renderJsx(story, options);

    if (rendered) {
      jsx = rendered;
    }

wrapper: (getStory, context, { options, parameters }) => {
    const storyOptions = parameters || options;
    addons.getChannel().on(EVENTS.SET, setResources);

    if (!Array.isArray(storyOptions) && !Array.isArray(storyOptions.cssresources)) {
      throw new Error('The `cssresources` parameter needs to be an Array');
    }

    return getStory(context);
  },
});

}

interface ActionLoggerState {
  actions: ActionDisplay[];
}

const safeDeepEqual = (a: any, b: any): boolean => {
  try {
    return deepEqual(a, b);
  } catch (e) {
    return false;
  }
};

export default class ActionLogger extends Component {
  private channel = addons.getChannel();

  constructor(props: ActionLoggerProps) {
    super(props);

    this.state = { actions: [] };
  }

  componentDidMount() {
    this.channel.addListener(EVENT_ID, this.addAction);
    this.channel.addListener(STORY_RENDERED, this.handleStoryChange);
  }

  componentWillUnmount() {
    this.channel.removeListener(STORY_RENDERED, this.handleStoryChange);
    this.channel.removeListener(EVENT_ID, this.addAction);
  }