Add custom Slice type and tighten bindSelector types

Author: emseidov

src/index.ts

@@ -1,10 +1,3 @@
 import { useSlice } from './useSlice'
 
 export default useSlice
-export type {
-  SliceActions,
-  SliceName,
-  SliceSelectors,
-  SliceState,
-  UseSliceReturn
-} from './useSlice.types'

src/test/createMockSlice/createMockSlice.ts

@@ -1,15 +1,15 @@
 import { assoc } from '../../utils'
+import type { Slice } from '../../useSlice.types'
 import type {
   Config,
-  MockSlice,
   MockValues,
   MockSliceReturn
 } from './createMockSlice.types'
 
 export function createMockSlice(config: Config) {
   const implementations: Record<string, Record<string, any>> = {}
 
-  function mockSlice<T extends MockSlice>(
+  function mockSlice<T extends Slice>(
     mockedSlice: T,
     mockValues: Partial<MockValues<T>> = {}
   ): MockSliceReturn<T> {

src/test/createMockSlice/createMockSlice.types.ts

@@ -1,29 +1,23 @@
-import { Mock } from 'vitest'
-import { Slice } from '@reduxjs/toolkit'
-import { SliceState, SliceSelectors, SliceActions } from '../../useSlice.types'
+import type { Mock } from 'vitest'
+import type {
+  Slice,
+  SliceState,
+  SliceSelectors,
+  SliceActions
+} from '../../useSlice.types'
+import type { OmitFirst } from '../../utils/utils.types'
 
 export interface Config {
   createSpy(): any
   mockImplementation(implementations: any): void
 }
 
-export type OmitFirst<T extends any[]> = T extends [any, ...infer R] ? R : never
-
-export type MockSlice = Omit<Slice, 'selectors'> & {
-  selectors: {
-    [key: string]: <T extends Slice>(
-      state: SliceState<T>,
-      ...params: any[]
-    ) => any
-  }
-}
-
-export type MockValues<T extends MockSlice> = {
+export type MockValues<T extends Slice> = {
   [K in keyof SliceSelectors<T>]: (
     ...params: OmitFirst<Parameters<SliceSelectors<T>[K]>>
   ) => SliceState<T>
 } & { state: SliceState<T> }
 
-export type MockSliceReturn<T extends MockSlice> = {
+export type MockSliceReturn<T extends Slice> = {
   [K in keyof SliceActions<T>]: Mock
 }

src/test/createMockSlice/index.ts

@@ -1,8 +1,6 @@
 export { createMockSlice } from './createMockSlice'
 export type {
   Config,
-  MockSlice,
   MockSliceReturn,
-  MockValues,
-  OmitFirst
+  MockValues
 } from './createMockSlice.types'

src/useSlice.ts

@@ -1,22 +1,23 @@
 import { useMemo } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { bindActionCreators, type Slice } from '@reduxjs/toolkit'
+import { bindActionCreators } from '@reduxjs/toolkit'
 import { useLatest, bindSelectors } from './utils'
-import type { UseSliceReturn } from './useSlice.types'
+import type { Slice, UseSliceReturn } from './useSlice.types'
 
 export function useSlice<T extends Slice>(slice: T): UseSliceReturn<T> {
-  const state = useSelector(slice.selectSlice)
+  const { selectSlice, actions, selectors, name } = slice
+  const state = useSelector(selectSlice)
   const stateRef = useLatest(state)
   const dispatch = useDispatch()
 
-  const actions = useMemo(
-    () => bindActionCreators(slice.actions, dispatch),
-    [slice.actions, dispatch]
+  const boundActions = useMemo(
+    () => bindActionCreators(actions, dispatch),
+    [actions, dispatch]
   )
-  const selectors = useMemo(
-    () => bindSelectors(slice.selectors, slice.name, stateRef),
-    [slice.selectors, slice.name, stateRef]
+  const boundSelectors = useMemo(
+    () => bindSelectors(selectors, name, stateRef),
+    [selectors, name, stateRef]
   )
 
-  return [state, actions, selectors]
+  return [state, boundActions, boundSelectors]
 }

src/useSlice.types.ts

@@ -1,6 +1,10 @@
-import type { Slice } from '@reduxjs/toolkit'
+import type { Slice as ToolkitSlice } from '@reduxjs/toolkit'
 import type { BoundSelectors } from './utils'
 
+export type Slice = Omit<ToolkitSlice, 'selectors'> & {
+  selectors: Record<string, (state: any, ...params: any[]) => any>
+}
+
 export type SliceState<T extends Slice> = ReturnType<T['selectSlice']>
 export type SliceActions<T extends Slice> = T['actions']
 export type SliceSelectors<T extends Slice> = T['selectors']

src/utils/index.ts

@@ -1,7 +1,2 @@
 export { objectEntries, assoc, append, useLatest, bindSelectors } from './utils'
-export type {
-  ObjectEntriesReturn,
-  Expand,
-  BoundSelector,
-  BoundSelectors
-} from './utils.types'
+export type { ObjectEntriesReturn, Expand, BoundSelectors } from './utils.types'

src/utils/utils.ts

@@ -1,6 +1,6 @@
-import { useRef, RefObject } from 'react'
-import { Slice } from '@reduxjs/toolkit'
-import { ObjectEntriesReturn, Expand, BoundSelectors } from './utils.types'
+import { useRef, type RefObject } from 'react'
+import type { Slice } from './../useSlice.types'
+import type { ObjectEntriesReturn, Expand, BoundSelectors } from './utils.types'
 
 export function objectEntries<T extends Record<string, any>>(
   obj: T
@@ -36,11 +36,11 @@ export function bindSelectors<
   K extends Slice['name'],
   V extends RefObject<ReturnType<Slice['selectSlice']>>
 >(selectors: T, sliceName: K, stateRef: V) {
-  return objectEntries(selectors).reduce<BoundSelectors<any>>(
-    (accumulator, [name, fn]: [any, any]) =>
+  return objectEntries(selectors).reduce(
+    (accumulator, [name, fn]) =>
       assoc(accumulator, name, (...rest: any[]) =>
         fn({ [sliceName]: stateRef.current }, ...rest)
       ),
-    {}
+    {} as BoundSelectors<T>
   )
 }

src/utils/utils.types.ts

@@ -1,17 +1,13 @@
+import type { Slice } from '../useSlice.types'
+
 export type ObjectEntriesReturn<T> = {
   [K in keyof T]: [K, T[K]]
 }[keyof T][] & {}
 
 export type Expand<T> = { [P in keyof T]: T[P] } & {}
 
-export type BoundSelector<T extends (...args: any[]) => any> = T extends (
-  state: any,
-  ...args: infer Args
-) => infer Return
-  ? (...args: Args) => Return
-  : never
+export type OmitFirst<T extends any[]> = T extends [any, ...infer R] ? R : never
 
-export type BoundSelectors<T extends Record<string, (...args: any[]) => any>> =
-  {
-    [P in keyof T]: BoundSelector<T[P]>
-  }
+export type BoundSelectors<T extends Slice['selectors']> = {
+  [K in keyof T]: (...params: OmitFirst<Parameters<T[K]>>) => ReturnType<T[K]>
+}