Data: Allow using store object as argument for select and dispatch (#…

…26655)

Co-authored-by: Riad Benguella <benguella@gmail.com>

packages/annotations/src/format/annotation.js

@@ -7,7 +7,7 @@ import { applyFormat, removeFormat } from '@wordpress/rich-text';
 const FORMAT_NAME = 'core/annotation';
 
 const ANNOTATION_ATTRIBUTE_PREFIX = 'annotation-text-';
-const STORE_KEY = 'core/annotations';
+const STORE_NAME = 'core/annotations';
 
 /**
  * Applies given annotations to the given record.
@@ -145,7 +145,7 @@ export const annotation = {
 	) {
 		return {
 			annotations: select(
-				STORE_KEY
+				STORE_NAME
 			).__experimentalGetAnnotationsForRichText(
 				blockClientId,
 				richTextIdentifier
@@ -165,9 +165,9 @@ export const annotation = {
 	},
 	__experimentalGetPropsForEditableTreeChangeHandler( dispatch ) {
 		return {
-			removeAnnotation: dispatch( STORE_KEY )
+			removeAnnotation: dispatch( STORE_NAME )
 				.__experimentalRemoveAnnotation,
-			updateAnnotationRange: dispatch( STORE_KEY )
+			updateAnnotationRange: dispatch( STORE_NAME )
 				.__experimentalUpdateAnnotationRange,
 		};
 	},

packages/annotations/src/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
-import './store';
 import './format';
 import './block';
+
+export { store } from './store';

packages/annotations/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { registerStore } from '@wordpress/data';
+import { register, createReduxStore } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -13,12 +13,19 @@ import * as actions from './actions';
 /**
  * Module Constants
  */
-const MODULE_KEY = 'core/annotations';
+const STORE_NAME = 'core/annotations';
 
-const store = registerStore( MODULE_KEY, {
+/**
+ * Store definition for the annotations namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ */
+export const store = createReduxStore( STORE_NAME, {
 	reducer,
 	selectors,
 	actions,
 } );
 
-export default store;
+register( store );

packages/block-directory/src/index.js

@@ -6,5 +6,6 @@ import '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import './store';
 import './plugins';
+
+export { store } from './store';

packages/block-directory/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 import { controls as dataControls } from '@wordpress/data-controls';
 
 /**
@@ -16,7 +16,7 @@ import controls from './controls';
 /**
  * Module Constants
  */
-const MODULE_KEY = 'core/block-directory';
+const STORE_NAME = 'core/block-directory';
 
 /**
  * Block editor data store configuration.
@@ -33,6 +33,13 @@ export const storeConfig = {
 	resolvers,
 };
 
-const store = registerStore( MODULE_KEY, storeConfig );
+/**
+ * Store definition for the block directory namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ */
+export const store = createReduxStore( STORE_NAME, storeConfig );
 
-export default store;
+register( store );

packages/block-editor/README.md

@@ -504,6 +504,18 @@ _Properties_
 
 Undocumented declaration.
 
+<a name="store" href="#store">#</a> **store**
+
+Store definition for the block editor namespace.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#createReduxStore>
+
+_Type_
+
+-   `Object` 
+
 <a name="storeConfig" href="#storeConfig">#</a> **storeConfig**
 
 Block editor data store configuration.

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';
 
@@ -13,5 +12,5 @@ import '@wordpress/notices';
 import './hooks';
 export * from './components';
 export * from './utils';
-export { storeConfig } from './store';
+export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';

packages/block-editor/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { registerStore } from '@wordpress/data';
+import { createReduxStore, registerStore } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import controls from './controls';
 /**
  * Module Constants
  */
-const MODULE_KEY = 'core/block-editor';
+const STORE_NAME = 'core/block-editor';
 
 /**
  * Block editor data store configuration.
@@ -31,10 +31,23 @@ export const storeConfig = {
 	controls,
 };
 
-const store = registerStore( MODULE_KEY, {
+/**
+ * Store definition for the block editor namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ */
+export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,
 	persist: [ 'preferences' ],
 } );
-applyMiddlewares( store );
 
-export default store;
+// Ideally we'd use register instead of register stores.
+// We should be able to make the switch once we remove the "effects" middleware.
+// We also need a more generic way of defining persistence and not rely on a plugin.
+const instantiatedStore = registerStore( STORE_NAME, {
+	...storeConfig,
+	persist: [ 'preferences' ],
+} );
+applyMiddlewares( instantiatedStore );

packages/blocks/README.md

@@ -740,6 +740,18 @@ _Parameters_
 
 -   _blockName_ `string`: Block name.
 
+<a name="store" href="#store">#</a> **store**
+
+Store definition for the blocks namespace.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#createReduxStore>
+
+_Type_
+
+-   `Object` 
+
 <a name="switchToBlockType" href="#switchToBlockType">#</a> **switchToBlockType**
 
 Switch one or more blocks into one or more blocks of the new block type.

packages/blocks/src/index.js

@@ -8,10 +8,6 @@
 // Blocks are inferred from the HTML source of a post through a parsing mechanism
 // and then stored as objects in state, from which it is then rendered for editing.
 
-/**
- * Internal dependencies
- */
-import './store';
-
+export { store } from './store';
 export * from './api';
 export { withBlockContentContext } from './block-content-provider';

packages/blocks/src/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,4 +10,19 @@ import reducer from './reducer';
 import * as selectors from './selectors';
 import * as actions from './actions';
 
-registerStore( 'core/blocks', { reducer, selectors, actions } );
+const STORE_NAME = 'core/blocks';
+
+/**
+ * Store definition for the blocks namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ */
+export const store = createReduxStore( STORE_NAME, {
+	reducer,
+	selectors,
+	actions,
+} );
+
+register( store );

packages/core-data/src/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 import { controls } from '@wordpress/data-controls';
 
 /**
@@ -14,7 +14,7 @@ import * as resolvers from './resolvers';
 import * as locksSelectors from './locks/selectors';
 import * as locksActions from './locks/actions';
 import { defaultEntities, getMethodName } from './entities';
-import { REDUCER_KEY } from './name';
+import { STORE_NAME } from './name';
 
 // The entity selectors/resolvers and actions are shortcuts to their generic equivalents
 // (getEntityRecord, getEntityRecords, updateEntityRecord, updateEntityRecordss)
@@ -56,14 +56,24 @@ const entityActions = defaultEntities.reduce( ( result, entity ) => {
 	return result;
 }, {} );
 
-export const storeConfig = {
+const storeConfig = {
 	reducer,
 	controls,
 	actions: { ...actions, ...entityActions, ...locksActions },
 	selectors: { ...selectors, ...entitySelectors, ...locksSelectors },
 	resolvers: { ...resolvers, ...entityResolvers },
 };
-registerStore( REDUCER_KEY, storeConfig );
+
+/**
+ * Store definition for the code data namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ */
+export const store = createReduxStore( STORE_NAME, storeConfig );
+
+register( store );
 
 export { default as EntityProvider } from './entity-provider';
 export * from './entity-provider';

packages/core-data/src/name.js

@@ -4,4 +4,4 @@
  *
  * @type {string}
  */
-export const REDUCER_KEY = 'core';
+export const STORE_NAME = 'core';

packages/core-data/src/selectors.js

@@ -13,7 +13,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { REDUCER_KEY } from './name';
+import { STORE_NAME } from './name';
 import { getQueriedItems } from './queried-data';
 import { DEFAULT_ENTITY_KEY } from './entities';
 import { getNormalizedCommaSeparable } from './utils';
@@ -41,7 +41,7 @@ const EMPTY_ARRAY = [];
 export const isRequestingEmbedPreview = createRegistrySelector(
 	( select ) => ( state, url ) => {
 		return select( 'core/data' ).isResolving(
-			REDUCER_KEY,
+			STORE_NAME,
 			'getEmbedPreview',
 			[ url ]
 		);
@@ -692,7 +692,7 @@ export function getAutosave( state, postType, postId, authorId ) {
  */
 export const hasFetchedAutosaves = createRegistrySelector(
 	( select ) => ( state, postType, postId ) => {
-		return select( REDUCER_KEY ).hasFinishedResolution( 'getAutosaves', [
+		return select( STORE_NAME ).hasFinishedResolution( 'getAutosaves', [
 			postType,
 			postId,
 		] );

packages/core-data/src/test/integration.js

@@ -9,7 +9,7 @@ import { createRegistry, controls } from '@wordpress/data';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
 import * as resolvers from '../resolvers';
-import { storeConfig as coreStoreConfig } from '../';
+import { store } from '../';
 
 // Mock to prevent calling window.fetch in test environment
 jest.mock( '@wordpress/data-controls', () => {
@@ -52,7 +52,7 @@ describe( 'receiveEntityRecord', () => {
 				data: {},
 			},
 		};
-		registry.registerStore( 'core', coreStoreConfig );
+		registry.register( store );
 		registry.registerStore( 'test/resolution', {
 			actions: {
 				receiveEntityRecords: actions.receiveEntityRecords,
@@ -160,7 +160,7 @@ describe( 'receiveEntityRecord', () => {
 describe( 'saveEntityRecord', () => {
 	function createTestRegistry() {
 		const registry = createRegistry();
-		registry.registerStore( 'core', coreStoreConfig );
+		registry.register( store );
 		return registry;
 	}