Add thunk actions to replace rungen and controls (#27276)

* Move resolveSelect mapping from registry to store * Add thunk-like async actions to replace rungen and controls Co-authored-by: Jarda Snajdr <jsnajdr@gmail.com>
WordPress · Jan 28, 2021 · 9631e0d · 9631e0d
1 parent 12d81cd
commit 9631e0d
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 48 deletions.
diff --git a/packages/data/src/redux-store/index.js b/packages/data/src/redux-store/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { createStore, applyMiddleware } from 'redux';
-import { flowRight, get, mapValues } from 'lodash';
+import { flowRight, get, mapValues, omit } from 'lodash';
 import combineReducers from 'turbo-combine-reducers';
 import EquivalentKeyMap from 'equivalent-key-map';
 
@@ -17,6 +17,7 @@ import createReduxRoutineMiddleware from '@wordpress/redux-routine';
 import { builtinControls } from '../controls';
 import promise from '../promise-middleware';
 import createResolversCacheMiddleware from '../resolvers-cache-middleware';
+import createThunkMiddleware from './thunk-middleware';
 import metadataReducer from './metadata/reducer';
 import * as metadataSelectors from './metadata/selectors';
 import * as metadataActions from './metadata/actions';
@@ -81,7 +82,32 @@ export default function createReduxStore( key, options ) {
 		name: key,
 		instantiate: ( registry ) => {
 			const reducer = options.reducer;
-			const store = instantiateReduxStore( key, options, registry );
+			const thunkArgs = {
+				registry,
+				get dispatch() {
+					return Object.assign(
+						( action ) => store.dispatch( action ),
+						getActions()
+					);
+				},
+				get select() {
+					return Object.assign(
+						( selector ) =>
+							selector( store.__unstableOriginalGetState() ),
+						getSelectors()
+					);
+				},
+				get resolveSelect() {
+					return getResolveSelectors();
+				},
+			};
+
+			const store = instantiateReduxStore(
+				key,
+				options,
+				registry,
+				thunkArgs
+			);
 			const resolversCache = createResolversCache();
 
 			let resolvers;
@@ -92,6 +118,7 @@ export default function createReduxStore( key, options ) {
 				},
 				store
 			);
+
 			let selectors = mapSelectors(
 				{
 					...mapValues(
@@ -123,6 +150,8 @@ export default function createReduxStore( key, options ) {
 
 			const getSelectors = () => selectors;
 			const getActions = () => actions;
+			const getResolveSelectors = () =>
+				mapResolveSelectors( selectors, store );
 
 			// We have some modules monkey-patching the store object
 			// It's wrong to do so but until we refactor all of our effects to controls
@@ -156,6 +185,7 @@ export default function createReduxStore( key, options ) {
 				selectors,
 				resolvers,
 				getSelectors,
+				__experimentalGetResolveSelectors: getResolveSelectors,
 				getActions,
 				subscribe,
 			};
@@ -171,10 +201,10 @@ export default function createReduxStore( key, options ) {
  *                                  describing reducer, actions, selectors,
  *                                  and resolvers.
  * @param {WPDataRegistry} registry Registry reference.
- *
+ * @param {Object} thunkArgs        Argument object for the thunk middleware.
  * @return {Object} Newly created redux store.
  */
-function instantiateReduxStore( key, options, registry ) {
+function instantiateReduxStore( key, options, registry, thunkArgs ) {
 	const controls = {
 		...options.controls,
 		...builtinControls,
@@ -190,6 +220,10 @@ function instantiateReduxStore( key, options, registry ) {
 		createReduxRoutineMiddleware( normalizedControls ),
 	];
 
+	if ( options.__experimentalUseThunks ) {
+		middlewares.push( createThunkMiddleware( thunkArgs ) );
+	}
+
 	const enhancers = [ applyMiddleware( ...middlewares ) ];
 	if (
 		typeof window !== 'undefined' &&
@@ -266,6 +300,44 @@ function mapActions( actions, store ) {
 	return mapValues( actions, createBoundAction );
 }
 
+/**
+ * Maps selectors to functions that return a resolution promise for them
+ *
+ * @param {Object} selectors Selectors to map.
+ * @param {Object} store     The redux store the selectors select from.
+ * @return {Object}          Selectors mapped to their resolution functions.
+ */
+function mapResolveSelectors( selectors, store ) {
+	return mapValues(
+		omit( selectors, [
+			'getIsResolving',
+			'hasStartedResolution',
+			'hasFinishedResolution',
+			'isResolving',
+			'getCachedResolvers',
+		] ),
+		( selector, selectorName ) => ( ...args ) =>
+			new Promise( ( resolve ) => {
+				const hasFinished = () =>
+					selectors.hasFinishedResolution( selectorName, args );
+				const getResult = () => selector.apply( null, args );
+
+				// trigger the selector (to trigger the resolver)
+				const result = getResult();
+				if ( hasFinished() ) {
+					return resolve( result );
+				}
+
+				const unsubscribe = store.subscribe( () => {
+					if ( hasFinished() ) {
+						unsubscribe();
+						resolve( getResult() );
+					}
+				} );
+			} )
+	);
+}
+
 /**
  * Returns resolvers with matched selectors for a given namespace.
  * Resolvers are side effects invoked once per argument set of a given selector call,

diff --git a/packages/data/src/redux-store/thunk-middleware.js b/packages/data/src/redux-store/thunk-middleware.js
@@ -0,0 +1,9 @@
+export default function createThunkMiddleware( args ) {
+	return () => ( next ) => ( action ) => {
+		if ( typeof action === 'function' ) {
+			return action( args );
+		}
+
+		return next( action );
+	};
+}
diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { omit, without, mapValues, isObject } from 'lodash';
-import memize from 'memize';
+import { without, mapValues, isObject } from 'lodash';
 
 /**
  * Internal dependencies
@@ -102,47 +101,6 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		return result;
 	}
 
-	const getResolveSelectors = memize(
-		( selectors ) => {
-			return mapValues(
-				omit( selectors, [
-					'getIsResolving',
-					'hasStartedResolution',
-					'hasFinishedResolution',
-					'isResolving',
-					'getCachedResolvers',
-				] ),
-				( selector, selectorName ) => {
-					return ( ...args ) => {
-						return new Promise( ( resolve ) => {
-							const hasFinished = () =>
-								selectors.hasFinishedResolution(
-									selectorName,
-									args
-								);
-							const getResult = () =>
-								selector.apply( null, args );
-
-							// trigger the selector (to trigger the resolver)
-							const result = getResult();
-							if ( hasFinished() ) {
-								return resolve( result );
-							}
-
-							const unsubscribe = subscribe( () => {
-								if ( hasFinished() ) {
-									unsubscribe();
-									resolve( getResult() );
-								}
-							} );
-						} );
-					};
-				}
-			);
-		},
-		{ maxSize: 1 }
-	);
-
 	/**
 	 * Given the name of a registered store, returns an object containing the store's
 	 * selectors pre-bound to state so that you only need to supply additional arguments,
@@ -155,7 +113,16 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {Object} Each key of the object matches the name of a selector.
 	 */
 	function __experimentalResolveSelect( storeNameOrDefinition ) {
-		return getResolveSelectors( select( storeNameOrDefinition ) );
+		const storeName = isObject( storeNameOrDefinition )
+			? storeNameOrDefinition.name
+			: storeNameOrDefinition;
+		__experimentalListeningStores.add( storeName );
+		const store = stores[ storeName ];
+		if ( store ) {
+			return store.__experimentalGetResolveSelectors();
+		}
+
+		return parent && parent.__experimentalResolveSelect( storeName );
 	}
 
 	/**