Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Clean up dev artifacts
  • Loading branch information
adamziel committed Jun 8, 2022
commit cd068661dcac7a01cdba63cf4a37d7aebb97301b
33 changes: 16 additions & 17 deletions packages/data/src/components/use-select/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,31 @@ const noop = () => {};
const renderQueue = createQueue();

/** @typedef {import('../../types').StoreDescriptor} StoreDescriptor */
/** @typedef {import('../../types').UseSelect} UseSelect */
/** @typedef {import('../../types').UseSelectReturn} UseSelectReturn */
/** @typedef {import('../../types').MapSelect} MapSelect */
/** @typedef {import('../../types').CoreStore} CoreStore */

/**
* Custom react hook for retrieving props from registered selectors.
*
* In general, this custom React hook follows the
* [rules of hooks](https://reactjs.org/docs/hooks-rules.html).
*
* @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 {*} 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';
Expand Down Expand Up @@ -75,21 +89,6 @@ const renderQueue = createQueue();
* return <div onPaste={ onPaste }>{ children }</div>;
* }
* ```
* @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 {*} deps If provided, this memoizes the mapSelect so the
* same `mapSelect` is invoked on every state
* change unless the dependencies change.
* @return {import('../../types').UseSelectReturn<T>} A custom react hook.
*/
export default function useSelect( mapSelect, deps ) {
Expand Down
29 changes: 2 additions & 27 deletions packages/data/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,41 +55,16 @@ export type UseSelectReturn<
: never;
export type MapSelect = ( select: SelectFunction ) => any;

export type SelectFunction = < Descriptor >(
type SelectFunction = < Descriptor >(
store: Descriptor
) => GetSelectorsOf< Descriptor >;

export type GetSelectorsOf< Descriptor > = Descriptor extends StoreDescriptor<
type GetSelectorsOf< Descriptor > = Descriptor extends StoreDescriptor<
ReduxStoreConfig< infer X, any, infer S >
>
? S
: never;

/*

*/
// Test {{{
const useSelect = {} as UseSelect;
export type CoreStore = StoreDescriptor<
ReduxStoreConfig<
{ lorem: 'ipsum' },
any,
{ getEntityRecord: ( name: string ) => 123 }
>
>;
const store: CoreStore = {} as any;
export function PretendedReactComponent() {
const selectors = useSelect( store );
// Selectors reflect the CoreStore's selecots
const nb123 = useSelect( ( select ) => {
const number = select( store ).getEntityRecord( 'a' );
return number;
} );
// nb123 is a number 123
return { selectors, nb123 };
}
// }}

export interface DataRegistry {
register: ( store: StoreDescriptor< any > ) => void;
}
Expand Down