Selecting and Dispatching with the Data Module • https://getwithgutenberg.com/2019/05/selecting-and-dispatching-with-the-data-store/

01.php

<?php
wp_register_script(
    'gwg-block',
    GWG_ESNEXT_PLUGIN_URL . 'block.build.js',
    [ 'wp-blocks', 'wp-i18n', 'wp-data', 'wp-compose' ],
    GWG_ESNEXT_VERSION,
    true // Enqueue script in the footer.
);

02.jsx

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { compose } = wp.compose;
const { withSelect, withDispatch } = wp.data;

const MyComponentBase = ({ createNotice, blocks, className }) => {
    const triggerNotice = (type) => {
        createNotice(type, __('Hello, Notices Data!', 'gwg'));
    }
    return (
        <div className={className}>
            <p>{__('Functional Component', 'gwg')}</p>

            <ul>
                <li><a onClick={() => triggerNotice('info')}>Trigger info notice</a></li>
                <li><a onClick={() => triggerNotice('error')}>Trigger error notice</a></li>
                <li><a onClick={() => triggerNotice('warning')}>Trigger warning notice</a></li>
                <li><a onClick={() => triggerNotice('success')}>Trigger success notice</a></li>
            </ul>

            <ul>
                {blocks.map(block => <li>{block.name}</li>)}
            </ul>
        </div>
    );
}

03.jsx

// Variable deconstruction.
({ createNotice, blocks, className }) => {}

// Alternative.
(params) => {
    const { createNotice, blocks, className } = params;
}

04.jsx

const triggerNotice = (type) => {
    createNotice(type, __('Hello, Notices Data!', 'gwg'));
}
return (
    <ul>
        <li><a onClick={() => triggerNotice('info')}>Trigger info notice</a></li>
    </ul>
);

05.jsx

return (
    <ul>
        {blocks.map(block => <li>{block.name}</li>)}
    </ul>
);

06.js

const applyWithSelect = withSelect(select => {
    const { getBlocks } = select('core/editor');
    return { blocks: getBlocks() };
});

const applyWithDispatch = withDispatch(dispatch => {
    return { createNotice } = dispatch('core/notices');
});

07.jsx

const MyComponent = compose(
    applyWithSelect,
    applyWithDispatch,
)(MyComponentBase);

registerBlockType('gwg/esnext-data', {
    title: __('Get With Gutenberg - ESNext Data', 'gwg'),
    category: 'common',

    edit(props) {
        return <MyComponent {...props} />;
    },

    save(props) {
        return <p className={props.className}>{__('Hello saved content.', 'gwg')}</p>;
    },
});

08.jsx

const applyWithDispatch = withDispatch(dispatch => {
    const { createNotice } = dispatch('core/notices');
    return { createNotice: createNotice };
});