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

/**
 * Carbon Fields dependencies.
 */
import { withValidation } from '@carbon-fields/core';

/**
 * Internal dependencies.
 */
import withConditionalLogic from '../hocs/with-conditional-logic';

/**
 * Connects every field to the store.
 */
addFilter( 'carbon-fields.field-edit.block', 'carbon-fields/blocks', compose(
	withConditionalLogic,
	withDispatch( ( dispatch ) => {
		const { lockPostSaving, unlockPostSaving } = dispatch( 'core/editor' );

		return {
			lockSaving: lockPostSaving,
			unlockSaving: unlockPostSaving
		};
	} ),
	withValidation
) );

/**
 * Internal dependencies.
 */
import './association';
import './complex';
import './date';

import { ExportPage } from './export-page';
import registerExportStore, { EXPORT_STORE } from './store';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';

registerExportStore();

export default compose(
	withSelect( ( select ) => {
		return {
			job: select( EXPORT_STORE ).getJob(),
			error: select( EXPORT_STORE ).getError(),
		};
	} ),
	withDispatch( ( dispatch ) => {
		const { start, cancel, reset } = dispatch( EXPORT_STORE );
		return { start, cancel, reset };
	} )
)( ExportPage );

label={__("Add photo", "dropit")}
            />
          
        )}
      
    );
  }
}

export default compose(
  withSelect(select => ({
    featuredImageId: select("core/editor").getEditedPostAttribute(
      "featured_media"
    )
  })),
  withDispatch(dispatch => ({
    insertBlock: dispatch("core/editor").insertBlock,
    updateFeaturedImage(imageId) {
      dispatch("core/editor").editPost({ featured_media: imageId });
    }
  }))
)(Photo);

);
}

const applyWithSelect = withSelect( select => {
	const { getEditedPostAttribute } = select( 'core/editor' );
	const { getPostType } = select( 'core' );
	const { isEditorPanelEnabled, isEditorPanelOpened } = select( 'core/edit-post' );

	return {
		postType: getPostType( getEditedPostAttribute( 'type' ) ),
		isEnabled: isEditorPanelEnabled( PANEL_NAME ),
		isOpened: isEditorPanelOpened( PANEL_NAME ),
	};
} );

const applyWithDispatch = withDispatch( dispatch => {
	const { toggleEditorPanelOpened } = dispatch( 'core/edit-post' );

	return {
		onTogglePanel: partial( toggleEditorPanelOpened, PANEL_NAME ),
	};
} );

export default compose(
	applyWithSelect,
	applyWithDispatch
)( FeaturedImage );

export default compose(
	withSelect( ( select, ownProps ) => {
		const slug = get( ownProps.taxonomy, [ 'slug' ] );
		const panelName = slug ? `taxonomy-panel-${ slug }` : '';
		return {
			panelName,
			isEnabled: slug ?
				select( 'core/edit-post' ).isEditorPanelEnabled( panelName ) :
				false,
			isOpened: slug ?
				select( 'core/edit-post' ).isEditorPanelOpened( panelName ) :
				false,
		};
	} ),
	withDispatch( ( dispatch, ownProps ) => ( {
		onTogglePanel: () => {
			dispatch( 'core/edit-post' ).toggleEditorPanelOpened( ownProps.panelName );
		},
	} ) ),
)( TaxonomyPanel );

} = select('core/editor');
    const {
      getChildBlockNames,
    } = select('core/blocks');

    const rootBlockName = getBlockName(rootClientId);

    return {
      selectedBlock: getSelectedBlock(),
      rootChildBlocks: getChildBlockNames(rootBlockName),
      title: getEditedPostAttribute('title'),
      items: getInserterItems(rootClientId),
      rootClientId,
    };
  }),
  withDispatch((dispatch, ownProps) => {
    const {
      __experimentalFetchReusableBlocks: fetchReusableBlocks,
      showInsertionPoint,
      hideInsertionPoint,
    } = dispatch('core/editor');

    return {
      fetchReusableBlocks,
      showInsertionPoint,
      hideInsertionPoint,
      onSelect (item) {
        const {
          replaceBlocks,
          insertBlock,
        } = dispatch('core/editor');
        const { selectedBlock, index, rootClientId } = ownProps;

min={ 8 }
					max={ 60 }
					value={ progressBarHeight }
				/>
			
		
	);
}

const applyWithSelect = withSelect( (select) => {
	return {
		goal: select( 'core/editor' ).getEditedPostAttribute( 'goal' )
	}
} );

const applyWithDispatch = withDispatch( (dispatch) => {
	return {
		onGoalChange: (value) => {
			dispatch( 'core/editor' ).editPost( { goal: value } )
		}
	}
} );

export const Inspector = compose(
	applyWithSelect,
	applyWithDispatch
)( InspectorBase );

icon: ownProps.icon || context.icon,
			sidebarName: `${ context.name }/${ ownProps.name }`,
		};
	} ),
	withSelect( ( select, { sidebarName } ) => {
		const {
			getActiveGeneralSidebarName,
			isPluginItemPinned,
		} = select( 'core/edit-post' );

		return {
			isActive: getActiveGeneralSidebarName() === sidebarName,
			isPinned: isPluginItemPinned( sidebarName ),
		};
	} ),
	withDispatch( ( dispatch, { isActive, sidebarName } ) => {
		const {
			closeGeneralSidebar,
			openGeneralSidebar,
			togglePinnedPluginItem,
		} = dispatch( 'core/edit-post' );

		return {
			togglePin() {
				togglePinnedPluginItem( sidebarName );
			},
			toggleSidebar() {
				if ( isActive ) {
					closeGeneralSidebar();
				} else {
					openGeneralSidebar( sidebarName );
				}

);
}

export default compose(
	withSelect( select => ( {
		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
		hasBlockSelection: !! select( 'core/editor' ).getBlockSelectionStart(),
		isEditorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
		isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
	} ) ),
	withDispatch( ( dispatch, { hasBlockSelection } ) => {
		const { openGeneralSidebar, closeGeneralSidebar } = dispatch( 'core/edit-post' );
		const sidebarToOpen = hasBlockSelection ? 'edit-post/block' : 'edit-post/document';

		return {
			openGeneralSidebar: () => openGeneralSidebar( sidebarToOpen ),
			closeGeneralSidebar: closeGeneralSidebar,
		};
	} )
)( Header );

}

export default compose(
	withSelect( ( select, ownProps ) => {
		const { getBlockCount, getSettings, getTemplateLock } = select( 'core/block-editor' );

		const isEmpty = ! getBlockCount( ownProps.rootClientId );
		const { bodyPlaceholder } = getSettings();

		return {
			isVisible: isEmpty,
			isLocked: !! getTemplateLock( ownProps.rootClientId ),
			placeholder: bodyPlaceholder,
		};
	} ),
	withDispatch( ( dispatch, ownProps ) => {
		const {
			insertDefaultBlock,
			startTyping,
		} = dispatch( 'core/block-editor' );

		return {
			onAppend() {
				const { rootClientId } = ownProps;

				insertDefaultBlock( undefined, rootClientId );
				startTyping();
			},
		};
	} ),
)( DefaultBlockAppender );