add unwrapped property to wrapped selectors

Author: EskiMojo14

packages/toolkit/src/createSlice.ts

@@ -533,6 +533,14 @@ type SliceDefinedCaseReducers<CaseReducers extends SliceCaseReducers<any>> = {
     : never
 }
 
+type RemappedSelector<S extends Selector, NewState> = S extends Selector<
+  any,
+  infer R,
+  infer P
+>
+  ? Selector<NewState, R, P> & { unwrapped: S }
+  : never
+
 /**
  * Extracts the final selector type from the `selectors` object.
  *
@@ -543,10 +551,10 @@ type SliceDefinedSelectors<
   Selectors extends SliceSelectors<State>,
   RootState
 > = {
-  [K in keyof Selectors as string extends K ? never : K]: (
-    rootState: RootState,
-    ...args: Tail<Parameters<Selectors[K]>>
-  ) => ReturnType<Selectors[K]>
+  [K in keyof Selectors as string extends K ? never : K]: RemappedSelector<
+    Selectors[K],
+    RootState
+  >
 }
 
 /**
@@ -768,20 +776,12 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
             for (const [name, selector] of Object.entries(
               options.selectors ?? {}
             )) {
-              map[name] = (rootState: any, ...args: any[]) => {
-                let sliceState = selectState.call(this, rootState)
-                if (typeof sliceState === 'undefined') {
-                  // check if injectInto has been called
-                  if (this !== slice) {
-                    sliceState = this.getInitialState()
-                  } else if (process.env.NODE_ENV !== 'production') {
-                    throw new Error(
-                      'selectState returned undefined for an uninjected slice reducer'
-                    )
-                  }
-                }
-                return selector(sliceState, ...args)
-              }
+              map[name] = wrapSelector(
+                this,
+                selector,
+                selectState,
+                this !== slice
+              )
             }
             return map
           },
@@ -817,6 +817,29 @@ export function buildCreateSlice({ creators }: BuildCreateSliceConfig = {}) {
   }
 }
 
+function wrapSelector<State, NewState, S extends Selector<State>>(
+  slice: Slice,
+  selector: S,
+  selectState: Selector<NewState, State>,
+  injected?: boolean
+) {
+  function wrapper(rootState: NewState, ...args: any[]) {
+    let sliceState = selectState.call(slice, rootState)
+    if (typeof sliceState === 'undefined') {
+      if (injected) {
+        sliceState = slice.getInitialState()
+      } else if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          'selectState returned undefined for an uninjected slice reducer'
+        )
+      }
+    }
+    return selector(sliceState, ...args)
+  }
+  wrapper.unwrapped = selector
+  return wrapper as RemappedSelector<S, NewState>
+}
+
 /**
  * A function that accepts an initial state, an object full of reducer
  * functions, and a "slice name", and automatically generates

packages/toolkit/src/tests/createSlice.test.ts

@@ -466,12 +466,15 @@ describe('createSlice', () => {
       reducers: {},
       selectors: {
         selectSlice: (state) => state,
-        selectMultiple: (state, multiplier: number) => state * multiplier,
+        selectMultiple: Object.assign(
+          (state: number, multiplier: number) => state * multiplier,
+          { test: 0 }
+        ),
       },
     })
-    it('expects reducer under slice.name if no selectState callback passed', () => {
+    it('expects reducer under slice.reducerPath if no selectState callback passed', () => {
       const testState = {
-        [slice.name]: slice.getInitialState(),
+        [slice.reducerPath]: slice.getInitialState(),
       }
       const { selectSlice, selectMultiple } = slice.selectors
       expect(selectSlice(testState)).toBe(slice.getInitialState())
@@ -487,6 +490,9 @@ describe('createSlice', () => {
       expect(selectSlice(customState)).toBe(slice.getInitialState())
       expect(selectMultiple(customState, 2)).toBe(slice.getInitialState() * 2)
     })
+    it('allows accessing properties on the selector', () => {
+      expect(slice.selectors.selectMultiple.unwrapped.test).toBe(0)
+    })
   })
   describe('slice injections', () => {
     it('uses injectInto to inject slice into combined reducer', () => {
@@ -580,7 +586,9 @@ describe('createSlice', () => {
           initialState: [] as any[],
           reducers: (create) => ({ thunk: create.asyncThunk(() => {}) }),
         })
-      ).toThrowErrorMatchingInlineSnapshot('"Cannot use `create.asyncThunk` in the built-in `createSlice`. Use `buildCreateSlice({ creators: { asyncThunk: asyncThunkCreator } })` to create a customised version of `createSlice`."')
+      ).toThrowErrorMatchingInlineSnapshot(
+        '"Cannot use `create.asyncThunk` in the built-in `createSlice`. Use `buildCreateSlice({ creators: { asyncThunk: asyncThunkCreator } })` to create a customised version of `createSlice`."'
+      )
     })
     const createThunkSlice = buildCreateSlice({
       creators: { asyncThunk: asyncThunkCreator },

packages/toolkit/src/tests/createSlice.typetest.ts

@@ -540,7 +540,10 @@ const value = actionCreators.anyKey
     selectors: {
       selectValue: (state) => state.value,
       selectMultiply: (state, multiplier: number) => state.value * multiplier,
-      selectToFixed: (state) => state.value.toFixed(2),
+      selectToFixed: Object.assign(
+        (state: { value: number }) => state.value.toFixed(2),
+        { static: true }
+      ),
     },
   })
 
@@ -555,6 +558,8 @@ const value = actionCreators.anyKey
   expectType<number>(selectMultiply(rootState, 2))
   expectType<string>(selectToFixed(rootState))
 
+  expectType<boolean>(selectToFixed.unwrapped.static)
+
   const nestedState = {
     nested: rootState,
   }