How to use @automattic/data-stores - 4 common examples

import { Icon, IconButton } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import React, { FunctionComponent } from 'react';
import { useDebounce } from 'use-debounce';

/**
 * Internal dependencies
 */
import { DomainSuggestions } from '@automattic/data-stores';
import { STORE_KEY as ONBOARD_STORE } from '../../stores/onboard';
import './style.scss';
import { DomainPickerButton } from '../domain-picker';
import { selectorDebounce } from '../../constants';
import Link from '../link';

const DOMAIN_SUGGESTIONS_STORE = DomainSuggestions.register();

interface Props {
	isEditorSidebarOpened: boolean;
	next?: string;
	prev?: string;
	toggleGeneralSidebar: () => void;
	toggleSidebarShortcut: KeyboardShortcut;
}

interface KeyboardShortcut {
	raw: string;
	display: string;
	ariaLabel: string;
}

const Header: FunctionComponent< Props > = ( {

Panel,
	PanelBody,
	PanelRow,
	TextControl,
} from '@wordpress/components';
import { __ as NO__ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useDebounce } from 'use-debounce';

/**
 * Internal dependencies
 */
import { DomainSuggestions } from '@automattic/data-stores';
import { selectorDebounce } from '../../constants';

const DOMAIN_SUGGESTIONS_STORE = DomainSuggestions.register();

export interface Props {
	/**
	 * Term to search when no user input is provided.
	 */
	defaultQuery?: string;

	/**
	 * Callback that will be invoked when a domain is selected.
	 *
	 * @param domainSuggestion The selected domain.
	 */
	onDomainSelect: ( domainSuggestion: DomainSuggestions.DomainSuggestion ) => void;

	/**
	 * Additional parameters for the domain suggestions query.

/**
 * Internal dependencies
 */
import { STORE_KEY as ONBOARD_STORE } from '../../stores/onboard';
import { Verticals } from '@automattic/data-stores';
import { SiteVertical } from '../../stores/onboard/types';
import { StepProps } from '../stepper-wizard';
import Question from '../question';
import { __TodoAny__ } from '../../../../types';

/**
 * Style dependencies
 */
import './style.scss';

const VERTICALS_STORE = Verticals.register();

const VerticalSelect: FunctionComponent< StepProps > = ( {
	onSelect,
	inputClass,
	isActive,
	onExpand,
} ) => {
	const popular = [
		NO__( 'Travel Agency' ),
		NO__( 'Digital Marketing' ),
		NO__( 'Cameras & Photography' ),
		NO__( 'Website Designer' ),
		NO__( 'Restaurant' ),
		NO__( 'Fashion Designer' ),
		NO__( 'Real Estate Agent' ),
	];

import { CSSTransition } from 'react-transition-group';
import PageLayoutSelector from './page-layout-selector';
import { partition } from 'lodash';

/**
 * Internal dependencies
 */
import { SiteVertical } from '../../stores/onboard/types';
import DesignCard from './design-card';

import './style.scss';
import { VerticalsTemplates } from '@automattic/data-stores';

type Template = VerticalsTemplates.Template;

const VERTICALS_TEMPLATES_STORE = VerticalsTemplates.register();

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 >();