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

function KeyboardShortcuts() {
	// Shortcuts Logic
	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' );

function SaveShortcut() {
	const { savePost } = useDispatch( 'core/editor' );
	const isEditedPostDirty = useSelect( ( select ) => select( 'core/editor' ).isEditedPostDirty, [] );

	useShortcut( 'core/editor/save', ( event ) => {
		event.preventDefault();

		// TODO: This should be handled in the `savePost` effect in
		// considering `isSaveable`. See note on `isEditedPostSaveable`
		// selector about dirtiness and meta-boxes.
		//
		// See: `isEditedPostSaveable`
		if ( ! isEditedPostDirty() ) {
			return;
		}

		savePost();
	}, { bindGlobal: true } );

const ColorPickers = props => {
	// State used to determine the clicked index in the color picker.
	const [ selectedIndex, setSelectedIndex ] = useState( null )

	const colors = useSelect( select => select( 'core/block-editor' ).getSettings().colors )

	// Enable reset if there are Stackable global colors.
	const disableReset = useMemo( () => ! colors.some( color => color.slug && color.slug.includes( 'stk-global-color' ) ), [ colors ] )

	/**
	 * Function used to update the colors in @wordpress/data,
	 *
	 * @param {Array} newColors colors passed.
	 */
	const updateColors = newColors => {
		const updatedColors = newColors.filter( color => color.slug.match( /^stk-global-color/ ) )

		// Update the blocks in our page.
		updateFallbackBlockAttributes( updatedColors )

		// Save settings.

function useShortcut( name, callback, options ) {
	const { combination, aliases } = useSelect( ( select ) => {
		return {
			combination: select( 'core/keyboard-shortcuts' ).getShortcutKeyCombination( name ),
			aliases: select( 'core/keyboard-shortcuts' ).getShortcutAliases( name ),
		};
	}, [ name ] );

	const shortcutKeys = useMemo( () => {
		const shortcuts = compact( [ combination, ...aliases ] );
		return shortcuts.map( ( shortcut ) => {
			return shortcut.modifier ?
				rawShortcut[ shortcut.modifier ]( shortcut.character ) :
				shortcut.character;
		} );
	}, [ combination, aliases ] );

	useKeyboardShortcut( shortcutKeys, callback, options );

export default function AddTemplate( {
	ids,
	onAddTemplateId,
	onRequestClose,
	isOpen,
} ) {
	const slugs = useSelect(
		( select ) => {
			const { getEntityRecord } = select( 'core' );
			return ids.reduce( ( acc, id ) => {
				const template = getEntityRecord( 'postType', 'wp_template', id );
				acc[ template ? template.slug : 'loading' ] = true;
				return acc;
			}, {} );
		},
		[ ids ]
	);
	const { saveEntityRecord } = useDispatch( 'core' );

	const [ slug, _setSlug ] = useState();
	const [ help, setHelp ] = useState();
	const setSlug = useCallback(
		( nextSlug ) => {

const EditorCarousel = () => {
	const currentPage = useSelect( ( select ) => select( 'amp/story' ).getCurrentPage(), [] );

	const {
		pages,
		currentIndex,
		previousPage,
		nextPage,
		isReordering,
		isRTL,
	} = useSelect( ( select ) => {
		const {
			getSettings,
			getBlockOrder,
			getBlocksByClientId,
			getAdjacentBlockClientId,
		} = select( 'core/block-editor' );
		const { isReordering: _isReordering } = select( 'amp/story' );

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

	return (
		
	);

const DesignSelector: FunctionComponent = () => {
	const siteVertical = useSelect(
		select => select( 'automattic/onboard' ).getState().siteVertical as SiteVertical
	);

	const templates =
		useSelect( select => select( VERTICALS_TEMPLATES_STORE ).getTemplates( siteVertical.id ) ) ??
		[];

	const [ designs, otherTemplates ] = partition(
		templates,
		( { category } ) => category === 'home'
	);

	const [ selectedDesign, setSelectedDesign ] = useState< Template | undefined >();
	const [ selectedLayouts, setSelectedLayouts ] = useState< Set< string > >( new Set() );
	const resetLayouts = () => setSelectedLayouts( new Set() );
	const toggleLayout = ( layout: Template ) =>
		setSelectedLayouts( layouts => {
			const nextLayouts = new Set( layouts );
			if ( nextLayouts.has( layout.slug ) ) {
				nextLayouts.delete( layout.slug );
			} else {

function DynamicShortcut( { name } ) {
	const { keyCombination, description, aliases } = useSelect( ( select ) => {
		const {
			getShortcutKeyCombination,
			getShortcutDescription,
			getShortcutAliases,
		} = select( 'core/keyboard-shortcuts' );

		return {
			keyCombination: getShortcutKeyCombination( name ),
			aliases: getShortcutAliases( name ),
			description: getShortcutDescription( name ),
		};
	} );

	if ( ! keyCombination ) {
		return null;
	}

export default function useConnectWpcom() {
	const { isAutoDraft } = useSelect( select => {
		const { status } = select( 'core/editor' ).getCurrentPost();
		return { isAutoDraft: 'auto-draft' === status };
	} );

	const { savePost } = useDispatch( 'core/editor' );

	const [ wpcomConnectUrl, setWpcomConnectUrl ] = useState();
	const [ isRequestingWpcomConnectUrl, setRequestingWpcomConnectUrl ] = useState( false );

	const currentUserConnected = isCurrentUserConnected();

	useEffect( () => {
		if ( currentUserConnected || wpcomConnectUrl || isRequestingWpcomConnectUrl ) {
			return;
		}