createStoreHook helper function for @xstate/store/react

[matthewdavi]

Hello,

I've found the DX of zustand creating a bound hook automatically for each store to be very ergonomic and pleasant. I also quite like @xstate/store and its type inference + structure around events.

But I've been confused as to why I need to pass in the store as the first argument to useSelector. This seems like a downgrade from the DX zustand offers. I've written this function for use in my app, and I'm wondering if this is an antipattern, or whether it's a good enough idea that it could be exposed as a helper function from the @xstate/store/react package.

// createSelectorHook.ts
import type { Store } from '@xstate/store';
import { useSelector } from '@xstate/store/react';

/* --------------------------------------------------------- *
 *  helpers
 * --------------------------------------------------------- */

/** Pull the context type out of any `Store` instance */
type ContextOf<T extends Store<any, any, any>> = T extends Store<
  infer Ctx,
  any,
  any
>
  ? Ctx
  : never;

/** EqualityFn signature used by `useSelector` (first arg can be `undefined`) */
type EqualityFn<T> = (a: T | undefined, b: T) => boolean;

/* --------------------------------------------------------- *
 *  factory
 * --------------------------------------------------------- */

/**
 * Create a React hook that’s permanently bound to the given store.
 *
 * @example
 *   export const store = createStore({ … });
 *   export const useStore = createSelectorHook(store);
 *
 *   const count = useStore(c => c.count);          // number
 *   const name  = useStore(c => c.name);           // string
 */
export function createSelectorHook<TStore extends Store<any, any, any>>(
  store: TStore
) {
  type Ctx = ContextOf<TStore>;

  return function useStoreSelector<Selected>(
    selector: (ctx: Ctx) => Selected,
    equalityFn?: EqualityFn<Selected>
  ): Selected {
    return useSelector(
      store,
      (state) => selector(state.context as Ctx),
      equalityFn // matches the exact signature expected by useSelector  [oai_citation:0‡github.com](https://github.com/statelyai/xstate/discussions/4998?utm_source=chatgpt.com)
    );
  };
}

[davidkpiano]

Inspired by this, I added a proposed createStoreHook(…) helper function: #5354

const useCountStore = createStoreHook({
  context: { count: 0 },
  on: {
    inc: (ctx, event: { by: number }) => ({
      ...ctx,
      count: ctx.count + event.by
    })
  }
});

// Usage
function Component() {
  const [count, store] = useCountStore((s) => s.context.count);
  store.trigger.inc({ by: 3 });

  // Usage (no selector)
  const [snapshot, store] = useCountStore();
}