How to automatically turn a selector into a hook?

[binarykitchen]

I'd like to be able to define selectors for each slice without having to pass over the root state or hook every time.

For example, in React

const Recorder = () => {
  const audioEnabled = useSelector(selectAudioEnabled); // <-- this requires two imports  
  ...
};

In the slice:

const selectOptions = (state: RootState) => state.options;

export const selectAudioEnabled = createSelector(
  selectOptions,
  (options) => options.audio.enabled,
);

What I wish is this:

const Recorder = () => {
  const audioEnabled = selectAudioEnabled(); // <-- just one import, without having to use useSelector from react-redux
  ...
};

That would reduce more boilerplate ;)

[EskiMojo14]

it's possible, but i'd put it in the same box as bindActionCreators - we think it's better to be explicit, and selectors are more composable than hooks.

[binarykitchen]

Oh interesting @EskiMojo14 thanks for the example.

How about we add this createBindSelectors fn to the toolkit for reuse?

Apropos bindActionCreators, can you point me to an example where the bindActionCreators fn solves this? As I can't find a valid example.

[EskiMojo14]

the point i was making is that i don't think it's a particularly useful pattern, like bindActionCreators isn't particularly useful 😅

if you want to use it in your codebase, you're welcome to copy the code, but I don't think it's a pattern we should recommend.

[binarykitchen]

Fair enough, thanks for your honesty. Let's drop that idea then.

[aryaemami59]

Last time I tried it, I came up with something like this.

import type { Selector, SelectorsObject } from "reselect"
import { useAppSelector } from "./hooks.js"
import {
  selectCategoryName,
  selectCheckedVendorIds,
  selectItemName,
  selectItemNumber,
} from "./selectors.js"
import type { RootState } from "./store.js"

export const capitalize = <const StringToCapitalize extends string>(
  inputString: StringToCapitalize,
): Capitalize<StringToCapitalize> =>
  (inputString.charAt(0).toUpperCase() +
    inputString.slice(1)) as Capitalize<StringToCapitalize>

export const objectEntries = <ObjectType extends Record<string, unknown>>(
  objectInput: ObjectType,
): {
  [ObjectKey in Extract<keyof ObjectType, string>]: [
    ObjectKey,
    ObjectType[ObjectKey],
  ]
}[Extract<keyof ObjectType, string>][] =>
  Object.entries(objectInput) as {
    [ObjectKey in Extract<keyof ObjectType, string>]: [
      ObjectKey,
      ObjectType[ObjectKey],
    ]
  }[Extract<keyof ObjectType, string>][]

export const objectFromEntries = <Entries extends [string, unknown]>(
  entries: Entries[],
): {
  [EntryKey in Entries[0]]: Extract<Entries, [EntryKey, Entries[1]]>[1]
} =>
  Object.fromEntries(entries) as {
    [EntryKey in Entries[0]]: Extract<Entries, [EntryKey, Entries[1]]>[1]
  }

export const createParametricSelectorHook =
  <Result, Params extends readonly [unknown, ...(readonly unknown[])]>(
    selector: (selector: RootState, ...args: Params) => Result,
  ) =>
  (...args: Params) =>
    useAppSelector(state => selector(state, ...args))

type MapSelectorsToHooks<
  SelectorsObjectType extends SelectorsObject<RootState>,
> = {
  [SelectorName in keyof SelectorsObjectType as SelectorName extends `select${infer R}`
    ? `use${R}`
    : `use${Capitalize<Extract<SelectorName, string>>}`]: SelectorsObjectType[SelectorName] extends Selector<
    RootState,
    infer Result,
    infer Params
  >
    ? (...args: Params) => Result
    : never
}

export const createParametricSelectorHooks = <
  SelectorsObjectType extends SelectorsObject<RootState>,
>(
  selectors: SelectorsObjectType,
): MapSelectorsToHooks<SelectorsObjectType> =>
  objectFromEntries(
    objectEntries(selectors).map(
      ([selectorName, selector]) =>
        [
          selectorName.startsWith("select")
            ? selectorName.replace(/^select/, "use")
            : `use${capitalize(selectorName)}`,
          createParametricSelectorHook(selector),
        ] as const,
    ),
  ) as MapSelectorsToHooks<SelectorsObjectType>

export const {
  useCategoryName,
  useCheckedVendorIds,
  useItemName,
  useItemNumber,
} = createParametricSelectorHooks({
  selectCategoryName,
  selectCheckedVendorIds,
  selectItemName,
  selectItemNumber,
})

[binarykitchen]

Thanks, @aryaemami59, but this looks complicated ...