Initial implementation of withTypes

Author: aryaemami59

src/hooks/useDispatch.ts

@@ -1,9 +1,24 @@
-import type { Action, Dispatch, UnknownAction } from 'redux'
 import type { Context } from 'react'
+import type { Action, Dispatch, UnknownAction } from 'redux'
 
 import type { ReactReduxContextValue } from '../components/Context'
 import { ReactReduxContext } from '../components/Context'
-import { useStore as useDefaultStore, createStoreHook } from './useStore'
+import { createStoreHook, useStore as useDefaultStore } from './useStore'
+
+export interface UseDispatch {
+  <
+    AppDispatch extends Dispatch<Action> = Dispatch<UnknownAction>
+  >(): AppDispatch
+  withTypes: <AppDispatch extends Dispatch<Action>>() => () => AppDispatch
+}
+// export interface UseDispatch<
+//   DispatchType extends Dispatch<UnknownAction> = Dispatch<UnknownAction>
+// > {
+//   <AppDispatch extends DispatchType = DispatchType>(): AppDispatch
+//   withTypes: <
+//     OverrideDispatchType extends DispatchType
+//   >() => UseDispatch<OverrideDispatchType>
+// }
 
 /**
  * Hook factory, which creates a `useDispatch` hook bound to a given context.
@@ -20,13 +35,19 @@ export function createDispatchHook<
     // @ts-ignore
     context === ReactReduxContext ? useDefaultStore : createStoreHook(context)
 
-  return function useDispatch<
+  const useDispatch = <
     AppDispatch extends Dispatch<A> = Dispatch<A>
-  >(): AppDispatch {
+  >(): AppDispatch => {
     const store = useStore()
     // @ts-ignore
     return store.dispatch
   }
+
+  Object.assign(useDispatch, {
+    withTypes: () => useDispatch,
+  })
+
+  return useDispatch as UseDispatch
 }
 
 /**

src/hooks/useSelector.ts

@@ -3,7 +3,7 @@ import { React } from '../utils/react'
 
 import type { ReactReduxContextValue } from '../components/Context'
 import { ReactReduxContext } from '../components/Context'
-import type { EqualityFn, NoInfer } from '../types'
+import type { EqualityFn, NoInfer, TypedUseSelectorHook } from '../types'
 import type { uSESWS } from '../utils/useSyncExternalStore'
 import { notInitialized } from '../utils/useSyncExternalStore'
 import {
@@ -75,7 +75,21 @@ export interface UseSelector {
     selector: (state: TState) => Selected,
     options?: UseSelectorOptions<Selected>
   ): Selected
+  withTypes: <TState>() => TypedUseSelectorHook<TState>
 }
+// export interface UseSelector<StateType = unknown> {
+//   <TState extends StateType = StateType, Selected = unknown>(
+//     selector: (state: TState) => Selected,
+//     equalityFn?: EqualityFn<Selected>
+//   ): Selected
+//   <TState extends StateType = StateType, Selected = unknown>(
+//     selector: (state: TState) => Selected,
+//     options?: UseSelectorOptions<Selected>
+//   ): Selected
+//   withTypes: <
+//     OverrideStateType extends StateType
+//   >() => UseSelector<OverrideStateType>
+// }
 
 let useSyncExternalStoreWithSelector = notInitialized as uSESWS
 export const initializeUseSelector = (fn: uSESWS) => {
@@ -101,12 +115,12 @@ export function createSelectorHook(
       ? useDefaultReduxContext
       : createReduxContextHook(context)
 
-  return function useSelector<TState, Selected extends unknown>(
+  const useSelector = <TState, Selected extends unknown>(
     selector: (state: TState) => Selected,
     equalityFnOrOptions:
       | EqualityFn<NoInfer<Selected>>
       | UseSelectorOptions<NoInfer<Selected>> = {}
-  ): Selected {
+  ): Selected => {
     const { equalityFn = refEquality, devModeChecks = {} } =
       typeof equalityFnOrOptions === 'function'
         ? { equalityFn: equalityFnOrOptions }
@@ -215,6 +229,12 @@ export function createSelectorHook(
 
     return selectedState
   }
+
+  Object.assign(useSelector, {
+    withTypes: () => useSelector,
+  })
+
+  return useSelector as UseSelector
 }
 
 /**

src/hooks/useStore.ts

@@ -1,12 +1,40 @@
 import type { Context } from 'react'
-import type { Action as BasicAction, UnknownAction, Store } from 'redux'
+import type { Action as BasicAction, Store, UnknownAction } from 'redux'
 import type { ReactReduxContextValue } from '../components/Context'
 import { ReactReduxContext } from '../components/Context'
 import {
-  useReduxContext as useDefaultReduxContext,
   createReduxContextHook,
+  useReduxContext as useDefaultReduxContext,
 } from './useReduxContext'
 
+export type StoreAction<StoreType extends Store> = StoreType extends Store<
+  any,
+  infer Action
+>
+  ? Action
+  : never
+
+export interface UseStore {
+  <State = any, Action extends BasicAction = UnknownAction>(): Store<
+    State,
+    Action
+  >
+
+  withTypes: <AppStore extends Store>() => () => AppStore
+}
+// export interface UseStore<StoreType extends Store = Store> {
+//   <
+//     State extends ReturnType<StoreType['getState']> = ReturnType<
+//       StoreType['getState']
+//     >,
+//     Action extends BasicAction = StoreAction<Store>
+//   >(): Store<State, Action>
+
+//   withTypes: <
+//     OverrideStoreType extends StoreType
+//   >() => UseStore<OverrideStoreType>
+// }
+
 /**
  * Hook factory, which creates a `useStore` hook bound to a given context.
  *
@@ -15,7 +43,7 @@ import {
  */
 export function createStoreHook<
   S = unknown,
-  A extends BasicAction = UnknownAction
+  A extends BasicAction = BasicAction
   // @ts-ignore
 >(context?: Context<ReactReduxContextValue<S, A> | null> = ReactReduxContext) {
   const useReduxContext =
@@ -24,15 +52,21 @@ export function createStoreHook<
       ? useDefaultReduxContext
       : // @ts-ignore
         createReduxContextHook(context)
-  return function useStore<
+  const useStore = <
     State = S,
     Action2 extends BasicAction = A
     // @ts-ignore
-  >() {
+  >() => {
     const { store } = useReduxContext()
     // @ts-ignore
     return store as Store<State, Action2>
   }
+
+  Object.assign(useStore, {
+    withTypes: () => useStore,
+  })
+
+  return useStore as UseStore
 }
 
 /**

test/hooks/useSelector.spec.tsx

@@ -1055,6 +1055,12 @@ describe('React', () => {
           })
         })
       })
+
+      test('useSelector.withTypes', () => {
+        const useAppSelector = useSelector.withTypes<RootState>()
+
+        expect(useAppSelector).toBe(useSelector)
+      })
     })
 
     describe('createSelectorHook', () => {

test/typetests/counterApp.ts

@@ -1,10 +1,5 @@
-import {
-  createSlice,
-  createAsyncThunk,
-  configureStore,
-  ThunkAction,
-  Action,
-} from '@reduxjs/toolkit'
+import type { Action, ThunkAction } from '@reduxjs/toolkit'
+import { configureStore, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
 
 export interface CounterState {
   counter: number
@@ -46,6 +41,7 @@ const counterStore = configureStore({
   middleware: (gdm) => gdm(),
 })
 
+export type AppStore = typeof counterStore
 export type AppDispatch = typeof counterStore.dispatch
 export type RootState = ReturnType<typeof counterStore.getState>
 export type AppThunk<ReturnType = void> = ThunkAction<

test/typetests/hooks.tsx

@@ -18,15 +18,20 @@ import {
   useStore,
 } from '../../src/index'
 
-import type { AppDispatch, RootState } from './counterApp'
+import type { AppDispatch, AppStore, RootState } from './counterApp'
 import { incrementAsync } from './counterApp'
 
 import { expectExactType, expectType } from '../typeTestHelpers'
 
 function preTypedHooksSetup() {
   // Standard hooks setup
-  const useAppDispatch = () => useDispatch<AppDispatch>()
-  const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+  const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+  // const useAppDispatch = () => useDispatch<AppDispatch>()
+  // const useAppSelector: UseSelector<RootState> = useSelector
+  const useAppSelector = useSelector.withTypes<RootState>()
+
+  useAppSelector((state) => state.counter)
+  const useAppStore = useStore.withTypes<AppStore>()
 
   function CounterComponent() {
     const dispatch = useAppDispatch()
@@ -84,7 +89,8 @@ function testShallowEqual() {
   )
   expectExactType<string>(selected1)
 
-  const useAppSelector: TypedUseSelectorHook<TestState> = useSelector
+  // const useAppSelector: UseSelector<TestState> = useSelector
+  const useAppSelector = useSelector.withTypes<TestState>()
 
   const selected2 = useAppSelector((state) => state.stateProp, shallowEqual)
   expectExactType<string>(selected2)