How to use the @wordpress/data.useDispatch function in @wordpress/data

const { clientIds, rootBlocksClientIds } = useSelect( ( select ) => {
		const { getSelectedBlockClientIds, getBlockOrder } = select( 'core/block-editor' );
		return {
			clientIds: getSelectedBlockClientIds(),
			rootBlocksClientIds: getBlockOrder(),
		};
	}, [] );

	const {
		duplicateBlocks,
		removeBlocks,
		insertAfterBlock,
		insertBeforeBlock,
		multiSelect,
		clearSelectedBlock,
	} = useDispatch( 'core/block-editor' );

	// Prevents bookmark all Tabs shortcut in Chrome when devtools are closed.
	// Prevents reposition Chrome devtools pane shortcut when devtools are open.
	useShortcut( 'core/block-editor/duplicate', useCallback( ( event ) => {
		event.preventDefault();
		duplicateBlocks( clientIds );
	}, [ clientIds, duplicateBlocks ] ), { bindGlobal: true } );

	// Does not clash with any known browser/native shortcuts, but preventDefault
	// is used to prevent any obscure unknown shortcuts from triggering.
	useShortcut( 'core/block-editor/remove', useCallback( ( event ) => {
		event.preventDefault();
		removeBlocks( clientIds );
	}, [ clientIds, removeBlocks ] ), { bindGlobal: true } );

	// Does not clash with any known browser/native shortcuts, but preventDefault

getBlockRootClientId,
		getSettings,
	} = useSelect( ( select ) => select( 'core/block-editor' ), [] );

	const {
		getCopiedMarkup,
		getCurrentPage,
	} = useSelect( ( select ) => select( 'amp/story' ), [] );

	const {
		removeBlock,
		insertBlock,
		updateBlockAttributes,
	} = useDispatch( 'core/block-editor' );

	const { setCopiedMarkup } = useDispatch( 'amp/story' );

	const { __experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML, isRTL } = getSettings();

	const isBlockAllowedOnPage = useIsBlockAllowedOnPage();
	const displayPasteError = useDisplayPasteError();

	const copyBlock = ( clientId ) => {
		const block = getBlock( clientId );
		const serialized = serialize( block );

		// Set the copied block to component state for being able to Paste.
		setCopiedMarkup( serialized );
		copyTextToClipBoard( serialized );
	};

	const getPageClientId = ( clientId ) => {

const _currentPage = getCurrentPage();
		const block = getBlock( _currentPage );

		return {
			currentPage: _currentPage,
			blockOrder: getBlockOrder( _currentPage ),
			// As used in  component
			mediaType: block && block.attributes.mediaType ? block.attributes.mediaType : '',
			allowedVideoMimeTypes: getSettings().allowedVideoMimeTypes,
		};
	}, [] );

	const isBlockAllowedOnPage = useIsBlockAllowedOnPage();

	const { insertBlock, updateBlockAttributes, selectBlock } = useDispatch( 'core/block-editor' );

	const insertBlockOnPage = useCallback( ( name ) => {
		const index = blockOrder.length;

		const insertedBlock = createBlock( name, {} );

		insertBlock( insertedBlock, index, currentPage );
	}, [ blockOrder, currentPage, insertBlock ] );

	const updateBlock = useCallback( ( media ) => {
		if ( ! currentPage ) {
			return;
		}

		const processed = processMedia( media );
		updateBlockAttributes( currentPage, processed );

useEffect( () => {
		if ( isReordering ) {
			wrapper.current.style.display = 'none';
		} else {
			wrapper.current.style.display = '';

			// Offset is number of pages times margin+width + plus a half.
			const offset = ( currentIndex + 0.5 ) * ( STORY_PAGE_MARGIN + STORY_PAGE_INNER_WIDTH );
			// Offset (and base value) changes with reading direction.
			const factor = isRTL ? -1 : 1;
			wrapper.current.style.transform = `translateX(calc(${ factor * 50 }% - ${ PAGE_BORDER }px - ${ factor * offset }px))`;
		}
	}, [ currentIndex, isReordering, wrapper, isRTL ] );

	const { setCurrentPage } = useDispatch( 'amp/story' );
	const { selectBlock } = useDispatch( 'core/block-editor' );

	const goToPage = ( page ) => {
		setCurrentPage( page );
		selectBlock( page );
	};

	if ( isReordering ) {
		return ;
	}

	return (
		
			<div>
				</div>

const HookComponent = () => {
    const isTyping = data.useSelect(select => select('core/block-editor').isTyping());
    const { resetBlocks } = data.useDispatch('core/block-editor');
    const dispatch = data.useDispatch();
    return (
        <button disabled="{isTyping}"> dispatch('core/data').resetBlocks()}&gt;
            Reset
        </button>
    );
};

const { blockType, defaultPattern, hasInnerBlocks, patterns } = useSelect( ( select ) => {
		const {
			__experimentalGetBlockPatterns,
			getBlockType,
			__experimentalGetDefaultBlockPattern,
		} = select( 'core/blocks' );

		return {
			blockType: getBlockType( name ),
			defaultPattern: __experimentalGetDefaultBlockPattern( name ),
			hasInnerBlocks: select( 'core/block-editor' ).getBlocks( clientId ).length > 0,
			patterns: __experimentalGetBlockPatterns( name ),
		};
	}, [ clientId, name ] );

	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );

	if ( hasInnerBlocks ) {
		return (
			
		);
	}

	return (
		<__experimentalBlockPatternPicker
			icon={ get( blockType, [ 'icon', 'src' ] ) }
			label={ get( blockType, [ 'title' ] ) }
			patterns={ patterns }
			onSelect={ ( nextPattern = defaultPattern ) => {
				if ( nextPattern.attributes ) {
					props.setAttributes( nextPattern.attributes );
				}

export default function Sidebar() {
    const { parseCitations, parseFootnotes, updateReference } = useDispatch(
        'abt/data',
    );
    const { toggleItemSelected } = useDispatch('abt/ui');

    const {
        citedItems,
        footnotes,
        isTyping,
        selectedItems,
        uncitedItems,
    } = useSelect(select => {
        const { getCitedItems, getFootnotes, getSortedItems } = select(
            'abt/data',
        );
        const {
            getSelectedItems,

const useCopyTicket = ( ticketEntity, dateEntities ) => {
	const { createEntity } = useDispatch( 'eventespresso/core' );
	const relatedPrices = useSelect( ( select ) => {
		const { getRelatedEntities } = select( 'eventespresso/core' );
		return getRelatedEntities( ticketEntity, 'prices' );
	}, [ ticketEntity ] );
	const newPrices = useCloneEntities( relatedPrices, 'price' );
	const updateTicketDateRelations = useCreateRelationsForTicketToEventDates();
	const updateTicketPriceRelations = useCreateRelationsForTicketToPrices();
	return useCallback( async () => {
		if ( ! isModelEntityOfModel( ticketEntity, 'ticket' ) ) {
			return falseFunc;
		}
		return async () => {
			const newTicket = await createEntity(
				'ticket',
				ticketEntity.forClone
			);

function Notices() {
	const { notices } = useSelect( ( select ) => {
		return {
			notices: select( 'core/notices' ).getNotices(),
		};
	}, [] );
	const snackbarNotices = filter( notices, {
		type: 'snackbar',
	} );
	const { removeNotice } = useDispatch( 'core/notices' );

	return (
		
	);
}

export default function Toolbar({ selectedItems }: Props) {
    const { addReferences, removeFootnotes, removeReferences } = useDispatch(
        'abt/data',
    );
    const { clearSelectedItems } = useDispatch('abt/ui');
    const { createErrorNotice } = useDispatch('core/notices');
    const removeSelectedItems = useCallback(() => {
        removeReferences([...selectedItems]);
        removeFootnotes([...selectedItems]);
        clearSelectedItems();
    }, [selectedItems]);
    return (
        <>