How to use the @wordpress/hooks.addAction function in @wordpress/hooks

onInlineToolbarButtonPressed = ( button: number ) => {
		Keyboard.dismiss();
		switch ( button ) {
			case InlineToolbarActions.UP:
				this.props.moveBlockUp();
				break;
			case InlineToolbarActions.DOWN:
				this.props.moveBlockDown();
				break;
			case InlineToolbarActions.DELETE:
				// adding a action that will exist for as long as it takes for the block to be removed and the component unmounted
				// this acts as a flag for the code using the action to know of its existence
				addAction( 'blocks.onRemoveBlockCheckUpload', 'gutenberg-mobile/blocks', this.onRemoveBlockCheckUpload );
				this.props.removeBlock();
				break;
		}
	};

componentDidMount() {
				FilteredComponentRenderer.instances.push( this );

				// If there were previously no mounted instances for components
				// filtered on this hook, add the hook handler.
				if ( FilteredComponentRenderer.instances.length === 1 ) {
					addAction( 'hookRemoved', namespace, onHooksUpdated );
					addAction( 'hookAdded', namespace, onHooksUpdated );
				}
			}

componentDidMount() {
		const hookName = this.getHookName();

		// Details on these events on the Heartbeat API docs
		// https://developer.wordpress.org/plugins/javascript/heartbeat-api/
		addAction( 'heartbeat.send', hookName, this.sendPostLock );
		addAction( 'heartbeat.tick', hookName, this.receivePostLock );
	}

Object.keys( cwds ).forEach( ( folderPref ) => {
		addAction( 'updated_node_and_npm', 'runNPMInstall', () => runNPMInstall( folderPref ) );

		cwds[ folderPref ] = preferences.value( 'basic', folderPref );
		if ( ! cwds[ folderPref ] ) {
			return;
		}

		const packageJson = normalize( cwds[ folderPref ] + '/package.json' );

		if ( existsSync( packageJson ) ) {
			debug( '(%s) Registering package.json watcher', folderPref );
			watch( packageJson ).on( 'change', () => {
				debug( '(%s) package.json change detected', folderPref );
				runNPMInstall( folderPref );
			 } );
		}
	} );

async function registerDockerJob() {
	debug( 'Registering job' );

	if ( 'win32' === process.platform ) {
		USING_TOOLBOX = await detectToolbox();
	}

	addAction( 'preference_saved', 'preferenceSaved', preferenceSaved, 9 );
	addAction( 'shutdown', 'shutdown', shutdown );

	startDocker();
}

function registerGruntJob() {
	debug( 'Registering job' );

	addAction( 'npm_install_finished', 'runGruntWatch', runGruntWatch );
	addAction( 'preference_saved', 'preferenceSaved', preferenceSaved, 9 );
	addAction( 'shutdown', 'shutdown', shutdown );

	cwd = preferences.value( 'basic', 'wordpress-folder' );

	if ( ! cwd ) {
		return;
	}

	const gruntfileJs = normalize( cwd + '/Gruntfile.js' );

	if ( existsSync( gruntfileJs ) ) {
		debug( 'Registering Gruntfile.js watcher' );
		watch( gruntfileJs ).on( 'change', () => {
			debug( 'Gruntfile.js change detected' );
			runGruntWatch();
		} );

componentDidMount() {
		const { instanceId } = this.props
		addAction( 'stackable.responsive-toggle.screen.change', `stackable/responsive-toggle-${ instanceId }`, this.onOtherScreenChange.bind( this ) )
		addAction( 'stackable.responsive-toggle.screen.open', `stackable/responsive-toggle-${ instanceId }`, this.onOtherScreenOpen.bind( this ) )
		addAction( 'stackable.responsive-toggle.screen.close', `stackable/responsive-toggle-${ instanceId }`, this.onOtherScreenClose.bind( this ) )
	}

constructor( props ) {
				super( props );

				this.onHooksUpdated = this.onHooksUpdated.bind( this );
				this.Component = applyFilters( hookName, OriginalComponent );
				this.namespace = uniqueId( 'core/with-filters/component-' );
				this.throttledForceUpdate = debounce( () => {
					this.Component = applyFilters( hookName, OriginalComponent );
					this.forceUpdate();
				}, ANIMATION_FRAME_PERIOD );

				addAction( 'hookRemoved', this.namespace, this.onHooksUpdated );
				addAction( 'hookAdded', this.namespace, this.onHooksUpdated );
			}

'blocks.Autocomplete.completers',
		'blocks.BlockEdit',
		'blocks.BlockListBlock',
		'blocks.MediaUpload',
	];
	if ( includes( deprecatedHooks, oldHookName ) ) {
		const newHookName = oldHookName.replace( 'blocks.', 'editor.' );
		deprecated( `${ oldHookName } filter`, {
			version: '3.3',
			alternative: newHookName,
		} );
		addFilter( newHookName, ...args );
	}
};

addAction( 'hookAdded', 'core/editor/deprecated', forwardDeprecatedHooks );

/**
 * Sets the locale data for the package type
 */
setLocaleData( window.cf.config.locale, 'carbon-fields-ui' );

/**
 * Determines the rendering context.
 *
 * @type {string}
 */
const context = isGutenberg() ? 'gutenberg' : 'classic';

/**
 * Abracadabra! Poof! Containers everywhere ...
 */
addAction( 'carbon-fields.init', 'carbon-fields/metaboxes', () => {
	initializeContainers( context );
	initializeMonitors( context );
} );