woocommerce/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/data-store/store-notices.md

Store Notices Store (wc/store/store-notices)

Table of contents

• Overview
• Usage
• Example
• Actions
  • registerContainer( containerContext )
  • unregisterContainer( containerContext )
• Selectors
  • getRegisteredContainers

Overview

The Store Notices Store allows to register and unregister containers for notices. This is useful for displaying notices in a specific location, such as a custom block.

Usage

To utilize this store you will import the STORE_NOTICES_STORE_KEY in any module referencing it. Assuming @woocommerce/block-data is registered as an external pointing to wc.wcBlocksData you can import the key via:

const { STORE_NOTICES_STORE_KEY } = window.wc.wcBlocksData;

Example

The following code snippet demonstrates how to register a container for notices.

export default function Block( attributes ) {
	const context = 'your-namespace/custom-form-step';

	dispatch( 'core/notices' ).createNotice(
		'error',
		'This is an example of an error notice.',
		{ context }
	);

	return (
		<>
			<StoreNoticesContainer context={ context } />
			{ /* Your custom block code here */ }
		</>
	);
}

💡 Internally, the StoreNoticesContainer component will dispatch the registerContainer action.

Please note that this is a simple example. In practice, you will want to trigger the createNotice action in response to a user action, such as submitting a form.

Actions

registerContainer( containerContext )

This action will register a new container.

Parameters

• containerContext string: The context or identifier of the container to be registered.

Returns

• object: An action object with the following properties:
  • type string: The type of the action.
  • containerContext string: The passed containerContext.

Example

dispatch( registerContainer( 'someContainerContext' ) );

unregisterContainer( containerContext )

This action will unregister an existing container.

Parameters

• containerContext string: The context or identifier of the container to be unregistered.

Returns

• object: An action object with the following properties:
  • type string: The type of the action.
  • containerContext string: The passed containerContext.

Example

dispatch( unregisterContainer( 'someContainerContext' ) );

Selectors

getRegisteredContainers

Returns the list of currently registered containers from the state.

Returns

• string[]: An array of strings with the registered container contexts.

Example

const store = select( 'wc/store/store-notices' );
const registeredContainers = store.getRegisteredContainers();

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.