fix

Author: zbeyens

.changeset/strange-trees-drive.md

@@ -0,0 +1,5 @@
+---
+'zustand-x': patch
+---
+
+Add `useStoreSelect`

README.md

@@ -283,7 +283,7 @@ Access the underlying Zustand store when needed:
 
 ```ts
 // Use the original Zustand hook
-const name = useZustandStore(store, (state) => state.name);
+const name = useStoreSelect(store, (state) => state.name);
 
 // Get the vanilla store
 const vanillaStore = store.store;

packages/zustand-x/README.md

@@ -283,7 +283,7 @@ Access the underlying Zustand store when needed:
 
 ```ts
 // Use the original Zustand hook
-const name = useZustandStore(store, (state) => state.name);
+const name = useStoreSelect(store, (state) => state.name);
 
 // Get the vanilla store
 const vanillaStore = store.store;

packages/zustand-x/src/tests/createStore.spec.ts

@@ -3,10 +3,10 @@ import { devtools } from 'zustand/middleware';
 
 import { createStore } from '../createStore';
 import {
+  useStoreSelect,
   useStoreState,
   useStoreValue,
   useTrackedStore,
-  useZustandStore,
 } from '../useStore';
 
 describe('zustandX', () => {
@@ -448,16 +448,18 @@ describe('zustandX', () => {
   });
 });
 
-describe('useZustandStore', () => {
-  it('should return the underlying Zustand store hook', () => {
+describe('useStoreSelect', () => {
+  it('should use the underlying Zustand store hook', () => {
     const store = createStore({ name: 'test' }, { name: 'test-store' });
-    const useStore = useZustandStore(store);
-
-    // The hook should be the same as store.useStore
-    expect(useStore).toBe(store.useStore);
 
     // Test in a component
-    const { result } = renderHook(() => useStore((state) => state.name));
+    const { result } = renderHook(() =>
+      useStoreSelect(
+        store,
+        (state) => state.name,
+        (a, b) => a === b
+      )
+    );
     expect(result.current).toBe('test');
   });
 });

packages/zustand-x/src/useStore.ts

@@ -109,17 +109,20 @@ export function useTracked<
 }
 
 /**
- * Get the underlying Zustand store hook.
+ * Use zustand store selector with optional equality function.
  * @example
- * const name = useZustandStore(store, (state) => state.name)
+ * const name = useStoreSelect(store, (state) => state.name, equalityFn)
  */
-export const useZustandStore = <
+export const useStoreSelect = <
   StateType extends TState,
   Mutators extends [StoreMutatorIdentifier, unknown][],
   TActions extends Record<string, AnyFunction> = {},
   TSelectors extends Record<string, AnyFunction> = {},
+  U = StateType,
 >(
-  store: TStateApi<StateType, Mutators, TActions, TSelectors>
-) => {
-  return store.useStore;
+  store: TStateApi<StateType, Mutators, TActions, TSelectors>,
+  selector: (state: StateType) => U,
+  equalityFn?: (a: U, b: U) => boolean
+): U => {
+  return store.useStore(selector, equalityFn);
 };