@wordpress/data 6.10.0 → 6.13.0

package/src/components/use-dispatch/use-dispatch.js

@@ -25,6 +25,7 @@ import useRegistry from '../registry-provider/use-registry';
  * ```jsx
  * import { useDispatch, useSelect } from '@wordpress/data';
  * import { useCallback } from '@wordpress/element';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function Button( { onClick, children } ) {
  *   return <button type="button" onClick={ onClick }>{ children }</button>
@@ -32,10 +33,10 @@ import useRegistry from '../registry-provider/use-registry';
  *
  * const SaleButton = ( { children } ) => {
  *   const { stockNumber } = useSelect(
- *     ( select ) => select( 'my-shop' ).getStockNumber(),
+ *     ( select ) => select( myCustomStore ).getStockNumber(),
  *     []
  *   );
- *   const { startSale } = useDispatch( 'my-shop' );
+ *   const { startSale } = useDispatch( myCustomStore );
  *   const onClick = useCallback( () => {
  *     const discountPercent = stockNumber > 50 ? 10: 20;
  *     startSale( discountPercent );

package/src/components/use-select/index.js

@@ -7,7 +7,13 @@ import { useMemoOne } from 'use-memo-one';
  * WordPress dependencies
  */
 import { createQueue } from '@wordpress/priority-queue';
-import { useRef, useCallback, useMemo, useReducer } from '@wordpress/element';
+import {
+	useRef,
+	useCallback,
+	useMemo,
+	useReducer,
+	useDebugValue,
+} from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { useIsomorphicLayoutEffect } from '@wordpress/compose';
 
@@ -20,7 +26,19 @@ import useAsyncMode from '../async-mode-provider/use-async-mode';
 const noop = () => {};
 const renderQueue = createQueue();
 
-/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */
+/**
+ * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
+ * @template C
+ */
+/**
+ * @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
+ * @template State,Actions,Selectors
+ */
+/**
+ * @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn
+ * @template T
+ */
+/** @typedef {import('../../types').MapSelect} MapSelect */
 
 /**
  * Custom react hook for retrieving props from registered selectors.
@@ -28,28 +46,25 @@ const renderQueue = createQueue();
  * In general, this custom React hook follows the
  * [rules of hooks](https://reactjs.org/docs/hooks-rules.html).
  *
- * @param {Function|StoreDescriptor|string} mapSelect Function called on every state change. The
- *                                                    returned value is exposed to the component
- *                                                    implementing this hook. The function receives
- *                                                    the `registry.select` method on the first
- *                                                    argument and the `registry` on the second
- *                                                    argument.
- *                                                    When a store key is passed, all selectors for
- *                                                    the store will be returned. This is only meant
- *                                                    for usage of these selectors in event
- *                                                    callbacks, not for data needed to create the
- *                                                    element tree.
- * @param {Array}                           deps      If provided, this memoizes the mapSelect so the
- *                                                    same `mapSelect` is invoked on every state
- *                                                    change unless the dependencies change.
+ * @template {MapSelect | StoreDescriptor<any>} T
+ * @param {T}         mapSelect Function called on every state change. The returned value is
+ *                              exposed to the component implementing this hook. The function
+ *                              receives the `registry.select` method on the first argument
+ *                              and the `registry` on the second argument.
+ *                              When a store key is passed, all selectors for the store will be
+ *                              returned. This is only meant for usage of these selectors in event
+ *                              callbacks, not for data needed to create the element tree.
+ * @param {unknown[]} deps      If provided, this memoizes the mapSelect so the same `mapSelect` is
+ *                              invoked on every state change unless the dependencies change.
  *
  * @example
  * ```js
  * import { useSelect } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function HammerPriceDisplay( { currency } ) {
  *   const price = useSelect( ( select ) => {
- *     return select( 'my-shop' ).getPrice( 'hammer', currency )
+ *     return select( myCustomStore ).getPrice( 'hammer', currency );
  *   }, [ currency ] );
  *   return new Intl.NumberFormat( 'en-US', {
  *     style: 'currency',
@@ -76,9 +91,10 @@ const renderQueue = createQueue();
  *
  * ```js
  * import { useSelect } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function Paste( { children } ) {
- *   const { getSettings } = useSelect( 'my-shop' );
+ *   const { getSettings } = useSelect( myCustomStore );
  *   function onPaste() {
  *     // Do something with the settings.
  *     const settings = getSettings();
@@ -86,8 +102,7 @@ const renderQueue = createQueue();
  *   return <div onPaste={ onPaste }>{ children }</div>;
  * }
  * ```
- *
- * @return {Function}  A custom react hook.
+ * @return {UseSelectReturn<T>} A custom react hook.
  */
 export default function useSelect( mapSelect, deps ) {
 	const hasMappingFunction = 'function' === typeof mapSelect;
@@ -239,6 +254,8 @@ export default function useSelect( mapSelect, deps ) {
 		// examining every individual value inside the `deps` array.
 	}, [ registry, wrapSelect, hasMappingFunction, depsChangedFlag ] );
 
+	useDebugValue( mapOutput );
+
 	return hasMappingFunction ? mapOutput : registry.select( mapSelect );
 }
 

package/src/components/use-select/test/suspense.js

@@ -50,17 +50,21 @@ function createRegistryWithStore() {
 	const sleep = ( ms ) => new Promise( ( r ) => setTimeout( () => r(), ms ) );
 
 	const resolvers = {
-		getToken: () => async ( { dispatch } ) => {
-			await sleep( 10 );
-			dispatch( { type: 'RECEIVE_TOKEN', token: 'token' } );
-		},
-		getData: ( token ) => async ( { dispatch } ) => {
-			await sleep( 10 );
-			if ( ! token ) {
-				throw 'missing token in resolver';
-			}
-			dispatch( { type: 'RECEIVE_DATA', data: 'therealdata' } );
-		},
+		getToken:
+			() =>
+			async ( { dispatch } ) => {
+				await sleep( 10 );
+				dispatch( { type: 'RECEIVE_TOKEN', token: 'token' } );
+			},
+		getData:
+			( token ) =>
+			async ( { dispatch } ) => {
+				await sleep( 10 );
+				if ( ! token ) {
+					throw 'missing token in resolver';
+				}
+				dispatch( { type: 'RECEIVE_DATA', data: 'therealdata' } );
+			},
 		getThatFails: () => async () => {
 			await sleep( 10 );
 			throw 'resolution failed';

package/src/components/with-dispatch/index.js

@@ -26,9 +26,10 @@ import { useDispatchWithMap } from '../use-dispatch';
  * }
  *
  * import { withDispatch } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * const SaleButton = withDispatch( ( dispatch, ownProps ) => {
- *     const { startSale } = dispatch( 'my-shop' );
+ *     const { startSale } = dispatch( myCustomStore );
  *     const { discountPercent } = ownProps;
  *
  *     return {
@@ -63,11 +64,12 @@ import { useDispatchWithMap } from '../use-dispatch';
  * }
  *
  * import { withDispatch } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
  *    // Stock number changes frequently.
- *    const { getStockNumber } = select( 'my-shop' );
- *    const { startSale } = dispatch( 'my-shop' );
+ *    const { getStockNumber } = select( myCustomStore );
+ *    const { startSale } = dispatch( myCustomStore );
  *    return {
  *        onClick() {
  *            const discountPercent = getStockNumber() > 50 ? 10 : 20;

package/src/components/with-dispatch/test/index.js

@@ -57,8 +57,8 @@ describe( 'withDispatch', () => {
 		} );
 		const testInstance = testRenderer.root;
 
-		const incrementBeforeSetProps = testInstance.findByType( 'button' )
-			.props.onClick;
+		const incrementBeforeSetProps =
+			testInstance.findByType( 'button' ).props.onClick;
 
 		// Verify that dispatch respects props at the time of being invoked by
 		// changing props after the initial mount.
@@ -194,9 +194,8 @@ describe( 'withDispatch', () => {
 				);
 			} );
 
-			const counterUpdateHandler = testRenderer.root.findByType(
-				'button'
-			).props.onClick;
+			const counterUpdateHandler =
+				testRenderer.root.findByType( 'button' ).props.onClick;
 
 			act( () => {
 				counterUpdateHandler();

package/src/components/with-registry/index.js

@@ -17,13 +17,14 @@ import { RegistryConsumer } from '../registry-provider';
  * @return {WPComponent} Enhanced component.
  */
 const withRegistry = createHigherOrderComponent(
-	( OriginalComponent ) => ( props ) => (
-		<RegistryConsumer>
-			{ ( registry ) => (
-				<OriginalComponent { ...props } registry={ registry } />
-			) }
-		</RegistryConsumer>
-	),
+	( OriginalComponent ) => ( props ) =>
+		(
+			<RegistryConsumer>
+				{ ( registry ) => (
+					<OriginalComponent { ...props } registry={ registry } />
+				) }
+			</RegistryConsumer>
+		),
 	'withRegistry'
 );
 

package/src/components/with-select/index.js

@@ -19,6 +19,7 @@ import useSelect from '../use-select';
  * @example
  * ```js
  * import { withSelect } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
  * function PriceDisplay( { price, currency } ) {
  * 	return new Intl.NumberFormat( 'en-US', {
@@ -28,7 +29,7 @@ import useSelect from '../use-select';
  * }
  *
  * const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
- * 	const { getPrice } = select( 'my-shop' );
+ * 	const { getPrice } = select( myCustomStore );
  * 	const { currency } = ownProps;
  *
  * 	return {

package/src/components/with-select/test/index.js

@@ -50,9 +50,8 @@ describe( 'withSelect', () => {
 			.fn()
 			.mockImplementation( ( props ) => <div>{ props.data }</div> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 		let testRenderer;
 		act( () => {
 			testRenderer = TestRenderer.create(
@@ -268,9 +267,8 @@ describe( 'withSelect', () => {
 			.fn()
 			.mockImplementation( ( props ) => <div>{ props.count }</div> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {
@@ -367,9 +365,8 @@ describe( 'withSelect', () => {
 
 		const OriginalComponent = jest.fn().mockImplementation( () => <div /> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		act( () => {
 			TestRenderer.create(
@@ -492,9 +489,8 @@ describe( 'withSelect', () => {
 				<div>{ JSON.stringify( props ) }</div>
 			) );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {
@@ -561,9 +557,8 @@ describe( 'withSelect', () => {
 				<div>{ props.count || 'Unknown' }</div>
 			) );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {
@@ -691,9 +686,8 @@ describe( 'withSelect', () => {
 			.fn()
 			.mockImplementation( ( props ) => <div>{ props.value }</div> );
 
-		const DataBoundComponent = withSelect( mapSelectToProps )(
-			OriginalComponent
-		);
+		const DataBoundComponent =
+			withSelect( mapSelectToProps )( OriginalComponent );
 
 		let testRenderer;
 		act( () => {

package/src/controls.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isObject } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -14,6 +9,10 @@ const SELECT = '@@data/SELECT';
 const RESOLVE_SELECT = '@@data/RESOLVE_SELECT';
 const DISPATCH = '@@data/DISPATCH';
 
+function isObject( object ) {
+	return object !== null && typeof object === 'object';
+}
+
 /**
  * Dispatches a control action for triggering a synchronous registry select.
  *
@@ -118,20 +117,25 @@ export const controls = { select, resolveSelect, dispatch };
 
 export const builtinControls = {
 	[ SELECT ]: createRegistryControl(
-		( registry ) => ( { storeKey, selectorName, args } ) =>
-			registry.select( storeKey )[ selectorName ]( ...args )
+		( registry ) =>
+			( { storeKey, selectorName, args } ) =>
+				registry.select( storeKey )[ selectorName ]( ...args )
 	),
 	[ RESOLVE_SELECT ]: createRegistryControl(
-		( registry ) => ( { storeKey, selectorName, args } ) => {
-			const method = registry.select( storeKey )[ selectorName ]
-				.hasResolver
-				? 'resolveSelect'
-				: 'select';
-			return registry[ method ]( storeKey )[ selectorName ]( ...args );
-		}
+		( registry ) =>
+			( { storeKey, selectorName, args } ) => {
+				const method = registry.select( storeKey )[ selectorName ]
+					.hasResolver
+					? 'resolveSelect'
+					: 'select';
+				return registry[ method ]( storeKey )[ selectorName ](
+					...args
+				);
+			}
 	),
 	[ DISPATCH ]: createRegistryControl(
-		( registry ) => ( { storeKey, actionName, args } ) =>
-			registry.dispatch( storeKey )[ actionName ]( ...args )
+		( registry ) =>
+			( { storeKey, actionName, args } ) =>
+				registry.dispatch( storeKey )[ actionName ]( ...args )
 	),
 };

package/src/factory.js

@@ -13,15 +13,18 @@
  *
  * @example
  * ```js
+ * import { store as coreStore } from '@wordpress/core-data';
+ * import { store as editorStore } from '@wordpress/editor';
+ *
  * const getCurrentPostId = createRegistrySelector( ( select ) => ( state ) => {
- *   return select( 'core/editor' ).getCurrentPostId();
+ *   return select( editorStore ).getCurrentPostId();
  * } );
  *
  * const getPostEdits = createRegistrySelector( ( select ) => ( state ) => {
  *   // calling another registry selector just like any other function
  *   const postType = getCurrentPostType( state );
  *   const postId = getCurrentPostId( state );
- *	 return select( 'core' ).getEntityRecordEdits( 'postType', postType, postId );
+ *	 return select( coreStore ).getEntityRecordEdits( 'postType', postType, postId );
  * } );
  * ```
  *

package/src/index.js

@@ -80,18 +80,20 @@ export { plugins };
 export { combineReducers };
 
 /**
- * Given the name or descriptor of a registered store, returns an object of the store's selectors.
+ * Given a store descriptor, returns an object of the store's selectors.
  * The selector functions are been pre-bound to pass the current state automatically.
  * As a consumer, you need only pass arguments of the selector, if applicable.
  *
- * @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
- *                                                       or the store descriptor.
+ * @param {StoreDescriptor|string} storeNameOrDescriptor The store descriptor. The legacy calling
+ *                                                       convention of passing the store name is
+ *                                                       also supported.
  *
  * @example
  * ```js
  * import { select } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
- * select( 'my-shop' ).getPrice( 'hammer' );
+ * select( myCustomStore ).getPrice( 'hammer' );
  * ```
  *
  * @return {Object} Object containing the store's selectors.
@@ -99,19 +101,20 @@ export { combineReducers };
 export const select = defaultRegistry.select;
 
 /**
- * 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,
- * and modified so that they return promises that resolve to their eventual values,
- * after any resolvers have ran.
+ * Given a store descriptor, returns an object containing the store's selectors pre-bound to state
+ * so that you only need to supply additional arguments, and modified so that they return promises
+ * that resolve to their eventual values, after any resolvers have ran.
  *
- * @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
- *                                                       or the store descriptor.
+ * @param {StoreDescriptor|string} storeNameOrDescriptor The store descriptor. The legacy calling
+ *                                                       convention of passing the store name is
+ *                                                       also supported.
  *
  * @example
  * ```js
  * import { resolveSelect } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
- * resolveSelect( 'my-shop' ).getPrice( 'hammer' ).then(console.log)
+ * resolveSelect( myCustomStore ).getPrice( 'hammer' ).then(console.log)
  * ```
  *
  * @return {Object} Object containing the store's promise-wrapped selectors.
@@ -119,32 +122,35 @@ export const select = defaultRegistry.select;
 export const resolveSelect = defaultRegistry.resolveSelect;
 
 /**
- * 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,
- * and modified so that they throw promises in case the selector is not resolved yet.
+ * Given a store descriptor, returns an object containing the store's selectors pre-bound to state
+ * so that you only need to supply additional arguments, and modified so that they throw promises
+ * in case the selector is not resolved yet.
  *
- * @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
- *                                                       or the store descriptor.
+ * @param {StoreDescriptor|string} storeNameOrDescriptor The store descriptor. The legacy calling
+ *                                                       convention of passing the store name is
+ *                                                       also supported.
  *
  * @return {Object} Object containing the store's suspense-wrapped selectors.
  */
 export const suspendSelect = defaultRegistry.suspendSelect;
 
 /**
- * Given the name of a registered store, returns an object of the store's action creators.
+ * Given a store descriptor, returns an object of the store's action creators.
  * Calling an action creator will cause it to be dispatched, updating the state value accordingly.
  *
  * Note: Action creators returned by the dispatch will return a promise when
  * they are called.
  *
- * @param {string|StoreDescriptor} storeNameOrDescriptor Unique namespace identifier for the store
- *                                                       or the store descriptor.
+ * @param {StoreDescriptor|string} storeNameOrDescriptor The store descriptor. The legacy calling
+ *                                                       convention of passing the store name is
+ *                                                       also supported.
  *
  * @example
  * ```js
  * import { dispatch } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
  *
- * dispatch( 'my-shop' ).setPrice( 'hammer', 9.75 );
+ * dispatch( myCustomStore ).setPrice( 'hammer', 9.75 );
  * ```
  * @return {Object} Object containing the action creators.
  */

package/src/plugins/persistence/index.js

@@ -63,10 +63,8 @@ export const withLazySameState = ( reducer ) => ( state, action ) => {
  * @return {Object} Persistence interface.
  */
 export function createPersistenceInterface( options ) {
-	const {
-		storage = DEFAULT_STORAGE,
-		storageKey = DEFAULT_STORAGE_KEY,
-	} = options;
+	const { storage = DEFAULT_STORAGE, storageKey = DEFAULT_STORAGE_KEY } =
+		options;
 
 	let data;
 

package/src/redux-store/index.js

@@ -23,8 +23,14 @@ import * as metadataSelectors from './metadata/selectors';
 import * as metadataActions from './metadata/actions';
 
 /** @typedef {import('../types').DataRegistry} DataRegistry */
-/** @typedef {import('../types').StoreDescriptor} StoreDescriptor */
-/** @typedef {import('../types').ReduxStoreConfig} ReduxStoreConfig */
+/**
+ * @typedef {import('../types').StoreDescriptor<C>} StoreDescriptor
+ * @template C
+ */
+/**
+ * @typedef {import('../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
+ * @template State,Actions,Selectors
+ */
 
 const trimUndefinedValues = ( array ) => {
 	const result = [ ...array ];
@@ -83,12 +89,13 @@ function createResolversCache() {
  * } );
  * ```
  *
- * @param {string}           key     Unique namespace identifier.
- * @param {ReduxStoreConfig} options Registered store options, with properties
- *                                   describing reducer, actions, selectors,
- *                                   and resolvers.
+ * @template State,Actions,Selectors
+ * @param {string}                                    key     Unique namespace identifier.
+ * @param {ReduxStoreConfig<State,Actions,Selectors>} options Registered store options, with properties
+ *                                                            describing reducer, actions, selectors,
+ *                                                            and resolvers.
  *
- * @return {StoreDescriptor} Store Object.
+ * @return   {StoreDescriptor<ReduxStoreConfig<State,Actions,Selectors>>} Store Object.
  */
 export default function createReduxStore( key, options ) {
 	return {
@@ -136,8 +143,9 @@ export default function createReduxStore( key, options ) {
 				{
 					...mapValues(
 						metadataSelectors,
-						( selector ) => ( state, ...args ) =>
-							selector( state.metadata, ...args )
+						( selector ) =>
+							( state, ...args ) =>
+								selector( state.metadata, ...args )
 					),
 					...mapValues( options.selectors, ( selector ) => {
 						if ( selector.isRegistrySelector ) {
@@ -308,9 +316,11 @@ function mapSelectors( selectors, store ) {
  * @return {Object} Actions mapped to the redux store provided.
  */
 function mapActions( actions, store ) {
-	const createBoundAction = ( action ) => ( ...args ) => {
-		return Promise.resolve( store.dispatch( action( ...args ) ) );
-	};
+	const createBoundAction =
+		( action ) =>
+		( ...args ) => {
+			return Promise.resolve( store.dispatch( action( ...args ) ) );
+		};
 
 	return mapValues( actions, createBoundAction );
 }

package/src/redux-store/metadata/test/utils.js

@@ -47,8 +47,7 @@ describe( 'selectorArgsToStateKey', () => {
 
 	it( 'should remove trailing undefined values', () => {
 		expect( selectorArgsToStateKey( [ 1, 2, undefined ] ) ).toEqual( [
-			1,
-			2,
+			1, 2,
 		] );
 		expect(
 			selectorArgsToStateKey( [ 1, 2, undefined, undefined ] )

package/src/redux-store/metadata/utils.ts

@@ -10,33 +10,33 @@ import type { AnyAction, Reducer } from 'redux';
  * @param  actionProperty Action property by which to key object.
  * @return Higher-order reducer.
  */
-export const onSubKey = < TState extends unknown, TAction extends AnyAction >(
-	actionProperty: string
-) => (
-	reducer: Reducer< TState, TAction >
-): Reducer< Record< string, TState >, TAction > => (
-	state: Record< string, TState > = {},
-	action
-) => {
-	// Retrieve subkey from action. Do not track if undefined; useful for cases
-	// where reducer is scoped by action shape.
-	const key = action[ actionProperty ];
-	if ( key === undefined ) {
-		return state;
-	}
+export const onSubKey =
+	< TState extends unknown, TAction extends AnyAction >(
+		actionProperty: string
+	) =>
+	(
+		reducer: Reducer< TState, TAction >
+	): Reducer< Record< string, TState >, TAction > =>
+	( state: Record< string, TState > = {}, action ) => {
+		// Retrieve subkey from action. Do not track if undefined; useful for cases
+		// where reducer is scoped by action shape.
+		const key = action[ actionProperty ];
+		if ( key === undefined ) {
+			return state;
+		}
 
-	// Avoid updating state if unchanged. Note that this also accounts for a
-	// reducer which returns undefined on a key which is not yet tracked.
-	const nextKeyState = reducer( state[ key ], action );
-	if ( nextKeyState === state[ key ] ) {
-		return state;
-	}
+		// Avoid updating state if unchanged. Note that this also accounts for a
+		// reducer which returns undefined on a key which is not yet tracked.
+		const nextKeyState = reducer( state[ key ], action );
+		if ( nextKeyState === state[ key ] ) {
+			return state;
+		}
 
-	return {
-		...state,
-		[ key ]: nextKeyState,
+		return {
+			...state,
+			[ key ]: nextKeyState,
+		};
 	};
-};
 
 /**
  * Normalize selector argument array by defaulting `undefined` value to an empty array