[Documentation] Add examples for all actions/selectors for the @wordpress/notice package.

[ryanwelcher]

What?

This PR introduces practical examples for the notice package documentation. Part of the effort in WordPress/Documentation-Issue-Tracker#379

Why?

WIthout examples, the data store APIs can be very confusing.

[ryanwelcher]

Tracking ticket for this effort is here - #42125

[adamziel]

It would be nice to include all the required imports in this example, so useDispatch and __. Also, the preferred way of calling useDispatch is by passing the imported store object as follows:

import { store as noticesStore } from '@wordpress/notices';
// ...
const { createNotice } = useDispatch( noticesStore );

[adamziel]

(I mean that for all the examples)

[ryanwelcher]

Thanks! I love importing the store name suggestion. All examples are updated.

[gziolo]

All the examples present how to use actions/selectors from the React component. In practice, it doesn't necessarily need to be the case. It's possible to use also the following snippet:

import { select } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

console.log( select( noticesStore ).getNotices() );

I'm not sure whether it's something we should include in the examples, but we definitely should make it clear that the usage depends on the context.

[ryanwelcher]

I'm not sure whether it's something we should include in the examples, but we definitely should make it clear that the usage depends on the context.

It's certainly possible to use the selectors this way, and we can also access and use them by calling wp.data.select('core/notices).getNotices() but, in my opinion, showing all the ways is just going to be more confusing.

I think the majority of cases will be either in a block's Edit component or in a SlotFill which will also be a component. So I think it make sense to show examples for the most common usage. Is there a common use-case I am not considering?

[gziolo]

Excellent work add all those examples.

[gziolo]

I think the majority of cases will be either in a block's Edit component or in a SlotFill which will also be a component. So I think it make sense to show examples for the most common usage. Is there a common use-case I am not considering?

I agree with that. That seems like the most common use case. On the flip side, it gives a false impression that you need React to use data stores. It's something we might want to emphasize in the documentation for @wordpress/data.