Merge pull request #1 from EskiMojo14/combine-slices-integrated

EskiMojo14 · web-flow · commit bccf47fa12ef · 2023-04-06T23:39:50.000+01:00
Begin investigating "integrated" approach
diff --git a/packages/toolkit/src/combineSlices.ts b/packages/toolkit/src/combineSlices.ts
@@ -89,7 +89,7 @@ type InjectConfig = {
 /**
  * A reducer that allows for slices/reducers to be injected after initialisation.
  */
-interface CombinedSliceReducer<
+export interface CombinedSliceReducer<
   InitialState,
   DeclaredState = InitialState
 > extends Reducer<
diff --git a/packages/toolkit/src/createSlice.ts b/packages/toolkit/src/createSlice.ts
@@ -1,5 +1,4 @@
 import type { AnyAction, Reducer } from 'redux'
-import { createNextState } from '.'
 import type {
   ActionCreatorWithoutPayload,
   PayloadAction,
@@ -16,8 +15,9 @@ import type {
 import { createReducer, NotFunction } from './createReducer'
 import type { ActionReducerMapBuilder } from './mapBuilders'
 import { executeReducerBuilderCallback } from './mapBuilders'
-import type { NoInfer } from './tsHelpers'
+import type { Id, NoInfer, Tail } from './tsHelpers'
 import { freezeDraftable } from './utils'
+import type { CombinedSliceReducer } from './combineSlices'
 
 let hasWarnedAboutObjectNotation = false
 
@@ -38,7 +38,8 @@ export type SliceActionCreator<P> = PayloadActionCreator<P>
 export interface Slice<
   State = any,
   CaseReducers extends SliceCaseReducers<State> = SliceCaseReducers<State>,
-  Name extends string = string
+  Name extends string = string,
+  Selectors extends SliceSelectors<State> = {}
 > {
   /**
    * The slice name.
@@ -67,6 +68,49 @@ export interface Slice<
    * If a lazy state initializer was provided, it will be called and a fresh value returned.
    */
   getInitialState: () => State
+
+  getSelectors(): Id<SliceDefinedSelectors<State, Selectors, State>>
+
+  getSelectors<RootState>(
+    selectState: (rootState: RootState) => State
+  ): Id<SliceDefinedSelectors<State, Selectors, RootState>>
+
+  selectors: Id<SliceDefinedSelectors<State, Selectors, { [K in Name]: State }>>
+
+  injectInto(
+    combinedReducer: CombinedSliceReducer<any>
+  ): InjectedSlice<State, CaseReducers, Name, Selectors>
+}
+
+interface InjectedSlice<
+  State = any,
+  CaseReducers extends SliceCaseReducers<State> = SliceCaseReducers<State>,
+  Name extends string = string,
+  Selectors extends SliceSelectors<State> = {}
+> extends Omit<
+    Slice<State, CaseReducers, Name, Selectors>,
+    'getSelectors' | 'selectors'
+  > {
+  getSelectors(): Id<SliceDefinedSelectors<State, Selectors, State | undefined>>
+
+  getSelectors<RootState>(
+    selectState: (rootState: RootState) => State | undefined
+  ): Id<SliceDefinedSelectors<State, Selectors, RootState>>
+
+  selectors: Id<
+    SliceDefinedSelectors<State, Selectors, { [K in Name]?: State | undefined }>
+  >
+}
+
+type SliceDefinedSelectors<
+  State,
+  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]>
 }
 
 /**
@@ -77,7 +121,8 @@ export interface Slice<
 export interface CreateSliceOptions<
   State = any,
   CR extends SliceCaseReducers<State> = SliceCaseReducers<State>,
-  Name extends string = string
+  Name extends string = string,
+  Selectors extends SliceSelectors<State> = Record<never, never>
 > {
   /**
    * The slice's name. Used to namespace the generated action types.
@@ -142,6 +187,8 @@ createSlice({
 ```
    */
   extraReducers?: (builder: ActionReducerMapBuilder<NoInfer<State>>) => void
+
+  selectors?: Selectors
 }
 
 /**
@@ -165,6 +212,10 @@ export type SliceCaseReducers<State> = {
     | CaseReducerWithPrepare<State, PayloadAction<any, string, any, any>>
 }
 
+export type SliceSelectors<State> = {
+  [K: string]: (sliceState: State, ...args: any[]) => any
+}
+
 type SliceActionType<
   SliceName extends string,
   ActionName extends keyof any
@@ -271,10 +322,11 @@ function getType(slice: string, actionKey: string): string {
 export function createSlice<
   State,
   CaseReducers extends SliceCaseReducers<State>,
-  Name extends string = string
+  Name extends string,
+  Selectors extends SliceSelectors<State>
 >(
-  options: CreateSliceOptions<State, CaseReducers, Name>
-): Slice<State, CaseReducers, Name> {
+  options: CreateSliceOptions<State, CaseReducers, Name, Selectors>
+): Slice<State, CaseReducers, Name, Selectors> {
   const { name } = options
   if (!name) {
     throw new Error('`name` is a required option for createSlice')
@@ -357,6 +409,24 @@ export function createSlice<
     })
   }
 
+  const defaultSelectSlice = (rootState: { [K in Name]: State }) =>
+    rootState[name]
+
+  const selectSelf = (state: State) => state
+
+  const selectorCache = new WeakMap<
+    (rootState: any) => State,
+    Record<string, (rootState: any) => any>
+  >()
+
+  const injectedSelectorCache = new WeakMap<
+    CombinedSliceReducer<any>,
+    WeakMap<
+      (rootState: any) => State | undefined,
+      Record<string, (rootState: any) => any>
+    >
+  >()
+
   let _reducer: ReducerWithInitialState<State>
 
   return {
@@ -373,5 +443,61 @@ export function createSlice<
 
       return _reducer.getInitialState()
     },
+    getSelectors(selectState?: (rootState: any) => State) {
+      if (selectState) {
+        const cached = selectorCache.get(selectState)
+        if (cached) {
+          return cached
+        }
+        const selectors: Record<string, (rootState: any) => any> = {}
+        for (const [name, selector] of Object.entries(
+          options.selectors ?? {}
+        )) {
+          selectors[name] = (rootState: any, ...args: any[]) =>
+            selector(selectState(rootState), ...args)
+        }
+        selectorCache.set(selectState, selectors)
+        return selectors as any
+      } else {
+        return options.selectors ?? {}
+      }
+    },
+    get selectors() {
+      return this.getSelectors(defaultSelectSlice)
+    },
+    injectInto(reducer) {
+      reducer.inject(this)
+      let selectorCache = injectedSelectorCache.get(reducer)
+      if (!selectorCache) {
+        selectorCache = new WeakMap()
+        injectedSelectorCache.set(reducer, selectorCache)
+      }
+      return {
+        ...this,
+        getSelectors(
+          selectState: (rootState: any) => State | undefined = selectSelf
+        ) {
+          const cached = selectorCache!.get(selectState)
+          if (cached) {
+            return cached
+          }
+          const selectors: Record<string, (rootState: any) => any> = {}
+          for (const [name, selector] of Object.entries(
+            options.selectors ?? {}
+          )) {
+            selectors[name] = (rootState: any, ...args: any[]) =>
+              selector(
+                selectState(rootState) ?? this.getInitialState(),
+                ...args
+              )
+          }
+          selectorCache!.set(selectState, selectors)
+          return selectors as any
+        },
+        get selectors() {
+          return this.getSelectors(defaultSelectSlice)
+        },
+      } as any
+    },
   }
 }
diff --git a/packages/toolkit/src/tests/createSlice.test.ts b/packages/toolkit/src/tests/createSlice.test.ts
@@ -1,5 +1,6 @@
 import { vi } from 'vitest'
-import type { PayloadAction } from '@reduxjs/toolkit'
+import type { PayloadAction, WithSlice } from '@reduxjs/toolkit'
+import { combineSlices } from '@reduxjs/toolkit'
 import { createSlice, createAction } from '@reduxjs/toolkit'
 import {
   mockConsole,
@@ -449,4 +450,71 @@ describe('createSlice', () => {
       )
     })
   })
+  describe('slice selectors', () => {
+    const slice = createSlice({
+      name: 'counter',
+      initialState: 42,
+      reducers: {},
+      selectors: {
+        selectSlice: (state) => state,
+        selectMultiple: (state, multiplier: number) => state * multiplier,
+      },
+    })
+    it('expects reducer under slice.name if no selectState callback passed', () => {
+      const testState = {
+        [slice.name]: slice.getInitialState(),
+      }
+      const { selectSlice, selectMultiple } = slice.selectors
+      expect(selectSlice(testState)).toBe(slice.getInitialState())
+      expect(selectMultiple(testState, 2)).toBe(slice.getInitialState() * 2)
+    })
+    it('allows passing a selector for a custom location', () => {
+      const customState = {
+        number: slice.getInitialState(),
+      }
+      const { selectSlice, selectMultiple } = slice.getSelectors(
+        (state: typeof customState) => state.number
+      )
+      expect(selectSlice(customState)).toBe(slice.getInitialState())
+      expect(selectMultiple(customState, 2)).toBe(slice.getInitialState() * 2)
+    })
+  })
+  describe('slice injections', () => {
+    it('uses injectInto to inject slice into combined reducer', () => {
+      const slice = createSlice({
+        name: 'counter',
+        initialState: 42,
+        reducers: {
+          increment: (state) => ++state,
+        },
+        selectors: {
+          selectSlice: (state) => state,
+          selectMultiple: (state, multiplier: number) => state * multiplier,
+        },
+      })
+
+      const { increment } = slice.actions
+
+      const combinedReducer = combineSlices({
+        static: slice.reducer,
+      }).withLazyLoadedSlices<WithSlice<typeof slice>>()
+
+      const uninjectedState = combinedReducer(undefined, increment())
+
+      expect(uninjectedState.counter).toBe(undefined)
+
+      const injectedSlice = slice.injectInto(combinedReducer)
+
+      // selector returns initial state if undefined in real state
+      expect(injectedSlice.selectors.selectSlice(uninjectedState)).toBe(
+        slice.getInitialState()
+      )
+
+      const injectedState = combinedReducer(undefined, increment())
+
+      expect(injectedSlice.selectors.selectSlice(injectedState)).toBe(
+        slice.getInitialState() + 1
+      )
+    })
+  })
 })
diff --git a/packages/toolkit/src/tests/createSlice.typetest.ts b/packages/toolkit/src/tests/createSlice.typetest.ts
@@ -499,3 +499,56 @@ const value = actionCreators.anyKey
     return { doNothing, setData, slice }
   }
 }
+
+/**
+ * Test: slice selectors
+ */
+
+{
+  const sliceWithoutSelectors = createSlice({
+    name: '',
+    initialState: '',
+    reducers: {},
+  })
+
+  // @ts-expect-error
+  sliceWithoutSelectors.selectors.foo
+
+  const sliceWithSelectors = createSlice({
+    name: 'counter',
+    initialState: { value: 0 },
+    reducers: {
+      increment: (state) => {
+        state.value += 1
+      },
+    },
+    selectors: {
+      selectValue: (state) => state.value,
+      selectMultiply: (state, multiplier: number) => state.value * multiplier,
+      selectToFixed: (state) => state.value.toFixed(2),
+    },
+  })
+
+  const rootState = {
+    [sliceWithSelectors.name]: sliceWithSelectors.getInitialState(),
+  }
+
+  const { selectValue, selectMultiply, selectToFixed } =
+    sliceWithSelectors.selectors
+
+  expectType<number>(selectValue(rootState))
+  expectType<number>(selectMultiply(rootState, 2))
+  expectType<string>(selectToFixed(rootState))
+
+  const nestedState = {
+    nested: rootState,
+  }
+
+  const nestedSelectors = sliceWithSelectors.getSelectors(
+    (rootState: typeof nestedState) => rootState.nested.counter
+  )
+
+  expectType<number>(nestedSelectors.selectValue(nestedState))
+  expectType<number>(nestedSelectors.selectMultiply(nestedState, 2))
+  expectType<string>(nestedSelectors.selectToFixed(nestedState))
+}
