Data: Use store instance as param for select and dispatch

packages/block-editor/package.json

@@ -50,7 +50,6 @@
 		"@wordpress/shortcode": "file:../shortcode",
 		"@wordpress/token-list": "file:../token-list",
 		"@wordpress/url": "file:../url",
-		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",

packages/block-editor/src/index.js

@@ -3,7 +3,6 @@
  */
 import '@wordpress/blocks';
 import '@wordpress/rich-text';
-import '@wordpress/viewport';
 import '@wordpress/keyboard-shortcuts';
 import '@wordpress/notices';
 

packages/data/src/registry.js

@@ -80,6 +80,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {*} The selector's returned value.
 	 */
 	function select( reducerKey ) {
+		reducerKey = String( reducerKey );
 		const store = stores[ reducerKey ];
 		if ( store ) {
 			return store.getSelectors();
@@ -153,6 +154,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {*} The action's returned value.
 	 */
 	function dispatch( reducerKey ) {
+		reducerKey = String( reducerKey );
 		const store = stores[ reducerKey ];
 		if ( store ) {
 			return store.getActions();
@@ -222,6 +224,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 
 		const namespace = createNamespace( reducerKey, options, registry );
 		registerGenericStore( reducerKey, namespace );
+		namespace.store.toString = () => reducerKey;
 		return namespace.store;
 	};
 

packages/data/src/test/registry.js

@@ -185,6 +185,16 @@ describe( 'createRegistry', () => {
 	} );
 
 	describe( 'registerStore', () => {
+		it( 'should return the reducer name for registered store', () => {
+			const store = registry.registerStore( 'butcher', {
+				reducer( state ) {
+					return state;
+				},
+			} );
+
+			expect( store.toString() ).toEqual( 'butcher' );
+		} );
+
 		it( 'should be shorthand for reducer, actions, selectors registration', () => {
 			const store = registry.registerStore( 'butcher', {
 				reducer( state = {}, action ) {
@@ -551,6 +561,18 @@ describe( 'createRegistry', () => {
 			);
 		} );
 
+		it( 'should work with the store object as param for select', () => {
+			const store = registry.registerStore( 'demo', {
+				reducer: ( state = 'OK' ) => state,
+				selectors: {
+					getValue: ( state ) => state,
+				},
+				resolvers: {},
+			} );
+
+			expect( registry.select( store ).getValue() ).toBe( 'OK' );
+		} );
+
 		it( 'should run the registry selector from a non-registry selector', () => {
 			const selector1 = () => 'result1';
 			const selector2 = createRegistrySelector( ( select ) => () =>
@@ -680,6 +702,26 @@ describe( 'createRegistry', () => {
 			registry.dispatch( 'counter' ).increment( 4 ); // state = 5
 			expect( store.getState() ).toBe( 5 );
 		} );
+
+		it( 'should work with the store object as param for dispatch', async () => {
+			const store = registry.registerStore( 'demo', {
+				reducer( state = 'OK', action ) {
+					if ( action.type === 'UPDATE' ) {
+						return 'UPDATED';
+					}
+					return state;
+				},
+				actions: {
+					update() {
+						return { type: 'UPDATE' };
+					},
+				},
+			} );
+
+			expect( store.getState() ).toBe( 'OK' );
+			await registry.dispatch( store ).update();
+			expect( store.getState() ).toBe( 'UPDATED' );
+		} );
 	} );
 
 	describe( 'use', () => {

packages/edit-post/src/index.js

@@ -6,7 +6,6 @@ import '@wordpress/block-editor';
 import '@wordpress/editor';
 import '@wordpress/keyboard-shortcuts';
 import '@wordpress/reusable-blocks';
-import '@wordpress/viewport';
 import '@wordpress/notices';
 import {
 	registerCoreBlocks,

packages/edit-post/src/index.native.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import '@wordpress/core-data';
-import '@wordpress/viewport';
 import '@wordpress/notices';
 import '@wordpress/format-library';
 import '@wordpress/reusable-blocks';

packages/editor/package.json

@@ -54,7 +54,6 @@
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",
-		"@wordpress/viewport": "file:../viewport",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19",

packages/editor/src/index.js

@@ -8,7 +8,6 @@ import '@wordpress/keyboard-shortcuts';
 import '@wordpress/notices';
 import '@wordpress/reusable-blocks';
 import '@wordpress/rich-text';
-import '@wordpress/viewport';
 
 /**
  * Internal dependencies

packages/interface/package.json

@@ -35,6 +35,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/plugins": "file:../plugins",
+		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19"
 	},

packages/interface/src/components/complementary-area/index.js

@@ -11,6 +11,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { check, starEmpty, starFilled } from '@wordpress/icons';
 import { useEffect, useRef } from '@wordpress/element';
+import { viewportStore } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
@@ -106,10 +107,8 @@ function ComplementaryArea( {
 				isActive: _activeArea === identifier,
 				isPinned: isItemPinned( scope, identifier ),
 				activeArea: _activeArea,
-				isSmall: select( 'core/viewport' ).isViewportMatch(
-					'< medium'
-				),
-				isLarge: select( 'core/viewport' ).isViewportMatch( 'large' ),
+				isSmall: select( viewportStore ).isViewportMatch( '< medium' ),
+				isLarge: select( viewportStore ).isViewportMatch( 'large' ),
 			};
 		},
 		[ identifier, scope ]

packages/viewport/README.md

@@ -76,6 +76,10 @@ _Returns_
 
 -   `Function`: Higher-order component.
 
+<a name="viewportStore" href="#viewportStore">#</a> **viewportStore**
+
+Undocumented declaration.
+
 <a name="withViewportMatch" href="#withViewportMatch">#</a> **withViewportMatch**
 
 Higher-order component creator, creating a new component which renders with

packages/viewport/src/index.js

@@ -1,9 +1,9 @@
 /**
  * Internal dependencies
  */
-import './store';
 import addDimensionsEventListener from './listener';
 
+export { default as viewportStore } from './store';
 export { default as ifViewportMatches } from './if-viewport-matches';
 export { default as withViewportMatch } from './with-viewport-match';
 

packages/viewport/src/listener.js

@@ -8,6 +8,11 @@ import { reduce, forEach, debounce, mapValues } from 'lodash';
  */
 import { dispatch } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import viewportStore from './store';
+
 const addDimensionsEventListener = ( breakpoints, operators ) => {
 	/**
 	 * Callback invoked when media query state should be updated. Is invoked a
@@ -16,7 +21,7 @@ const addDimensionsEventListener = ( breakpoints, operators ) => {
 	const setIsMatching = debounce(
 		() => {
 			const values = mapValues( queries, ( query ) => query.matches );
-			dispatch( 'core/viewport' ).setIsMatching( values );
+			dispatch( viewportStore ).setIsMatching( values );
 		},
 		{ leading: true }
 	);

packages/viewport/src/listener.native.js

@@ -9,6 +9,11 @@ import { Dimensions } from 'react-native';
  */
 import { dispatch } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import viewportStore from './store';
+
 const matchWidth = ( operator, breakpoint ) => {
 	const { width } = Dimensions.get( 'window' );
 	if ( operator === 'max-width' ) {
@@ -34,7 +39,7 @@ const addDimensionsEventListener = ( breakpoints, operators ) => {
 			{}
 		);
 
-		dispatch( 'core/viewport' ).setIsMatching( matches );
+		dispatch( viewportStore ).setIsMatching( matches );
 	};
 
 	Dimensions.addEventListener( 'change', setIsMatching );

packages/viewport/src/with-viewport-match.native.js

@@ -9,6 +9,11 @@ import { mapValues } from 'lodash';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import viewportStore from './store';
+
 /**
  * Higher-order component creator, creating a new component which renders with
  * the given prop names, where the value passed to the underlying component is
@@ -36,7 +41,7 @@ const withViewportMatch = ( queries ) =>
 	createHigherOrderComponent(
 		withSelect( ( select ) => {
 			return mapValues( queries, ( query ) => {
-				return select( 'core/viewport' ).isViewportMatch( query );
+				return select( viewportStore ).isViewportMatch( query );
 			} );
 		} ),
 		'withViewportMatch'