Experiment with allowing providing custom slice creators when calling createSlice

Author: EskiMojo14

errors.json

@@ -46,5 +46,6 @@
   "44": "called \\`injectEndpoints\\` to override already-existing endpointName  without specifying \\`overrideExisting: true\\`",
   "45": "context.exposeAction cannot be called twice for the same reducer definition: reducerName",
   "46": "context.exposeCaseReducer cannot be called twice for the same reducer definition: reducerName",
-  "47": "Could not find \"\" slice in state. In order for slice creators to use \\`context.selectSlice\\`, the slice must be nested in the state under its reducerPath: \"\""
-}
+  "47": "Could not find \"\" slice in state. In order for slice creators to use \\`context.selectSlice\\`, the slice must be nested in the state under its reducerPath: \"\"",
+  "48": "A creator with the name  has already been provided to buildCreateSlice"
+}

packages/toolkit/src/createSlice.ts

@@ -208,6 +208,14 @@ interface InternalReducerHandlingContext<State> {
 
   sliceCaseReducersByName: Record<string, any>
   actionCreators: Record<string, any>
+
+  sliceCreators: Record<string, ReducerCreator<RegisteredReducerType>['create']>
+  sliceCreatorHandlers: Partial<
+    Record<
+      RegisteredReducerType,
+      ReducerCreator<RegisteredReducerType>['handle']
+    >
+  >
 }
 
 export interface ReducerHandlingContext<State> {
@@ -530,12 +538,13 @@ export interface CreateSliceOptions<
         State,
         Name,
         ReducerPath,
-        CreatorMap
+        CreatorMap & SliceCreatorMap
       > = SliceCaseReducers<State>,
   Name extends string = string,
   ReducerPath extends string = Name,
   Selectors extends SliceSelectors<State> = SliceSelectors<State>,
   CreatorMap extends Record<string, RegisteredReducerType> = {},
+  SliceCreatorMap extends Record<string, RegisteredReducerType> = {},
 > {
   /**
    * The slice's name. Used to namespace the generated action types.
@@ -607,6 +616,10 @@ createSlice({
    * A map of selectors that receive the slice's state and any additional arguments, and return a result.
    */
   selectors?: Selectors
+
+  creators?: CreatorOption<SliceCreatorMap> & {
+    [K in keyof CreatorMap]?: never
+  }
 }
 
 export interface CaseReducerDefinition<
@@ -837,14 +850,18 @@ const isCreatorCallback = (
 ): reducers is CreatorCallback<any, any, any, any> =>
   typeof reducers === 'function'
 
+type CreatorOption<CreatorMap extends Record<string, RegisteredReducerType>> = {
+  [Name in keyof CreatorMap]: Name extends 'reducer' | 'preparedReducer'
+    ? never
+    : ReducerCreator<CreatorMap[Name]>
+} & {
+  asyncThunk?: ReducerCreator<ReducerType.asyncThunk>
+}
+
 interface BuildCreateSliceConfig<
   CreatorMap extends Record<string, RegisteredReducerType>,
 > {
-  creators?: {
-    [Name in keyof CreatorMap]: Name extends 'reducer' | 'preparedReducer'
-      ? never
-      : ReducerCreator<CreatorMap[Name]>
-  } & { asyncThunk?: ReducerCreator<ReducerType.asyncThunk> }
+  creators?: CreatorOption<CreatorMap>
 }
 
 export function buildCreateSlice<
@@ -901,27 +918,42 @@ export function buildCreateSlice<
     State,
     CaseReducers extends
       | SliceCaseReducers<State>
-      | CreatorCallback<State, Name, ReducerPath, CreatorMap>,
+      | CreatorCallback<State, Name, ReducerPath, CreatorMap & SliceCreatorMap>,
     Name extends string,
     Selectors extends SliceSelectors<State>,
     ReducerPath extends string = Name,
+    SliceCreatorMap extends Record<string, RegisteredReducerType> = {},
   >(
     options: CreateSliceOptions<
       State,
       CaseReducers,
       Name,
       ReducerPath,
       Selectors,
-      CreatorMap
+      CreatorMap,
+      SliceCreatorMap
     >,
   ): Slice<
     State,
-    GetCaseReducers<State, Name, ReducerPath, CreatorMap, CaseReducers>,
+    GetCaseReducers<
+      State,
+      Name,
+      ReducerPath,
+      CreatorMap & SliceCreatorMap,
+      CaseReducers
+    >,
     Name,
     ReducerPath,
     Selectors
   > {
-    const { name, reducerPath = name as unknown as ReducerPath } = options
+    const {
+      name,
+      reducerPath = name as unknown as ReducerPath,
+      creators: sliceCreators = {} as Record<
+        string,
+        ReducerCreator<RegisteredReducerType>
+      >,
+    } = options
     if (!name) {
       throw new Error('`name` is a required option for createSlice')
     }
@@ -944,6 +976,20 @@ export function buildCreateSlice<
       sliceCaseReducersByType: {},
       actionCreators: {},
       sliceMatchers: [],
+      sliceCreators: { ...creators },
+      sliceCreatorHandlers: { ...handlers },
+    }
+
+    for (const [name, creator] of Object.entries(sliceCreators)) {
+      if (name in creators) {
+        throw new Error(
+          `A creator with the name ${name} has already been provided to buildCreateSlice`,
+        )
+      }
+      internalContext.sliceCreators[name] = creator.create
+      if ('handle' in creator) {
+        internalContext.sliceCreatorHandlers[creator.type] = creator.handle
+      }
     }
 
     function getContext({ reducerName }: ReducerDetails) {
@@ -1009,15 +1055,15 @@ export function buildCreateSlice<
     }
 
     if (isCreatorCallback(options.reducers)) {
-      const reducers = options.reducers(creators as any)
+      const reducers = options.reducers(internalContext.sliceCreators as any)
       for (const [reducerName, reducerDefinition] of Object.entries(reducers)) {
         const { _reducerDefinitionType: type } = reducerDefinition
         if (typeof type === 'undefined') {
           throw new Error(
             'Please use reducer creators passed to callback. Each reducer definition must have a `_reducerDefinitionType` property indicating which handler to use.',
           )
         }
-        const handle = handlers[type]
+        const handle = internalContext.sliceCreatorHandlers[type]
         if (!handle) {
           throw new Error(`Unsupported reducer type: ${String(type)}`)
         }
@@ -1117,7 +1163,13 @@ export function buildCreateSlice<
     ): Pick<
       Slice<
         State,
-        GetCaseReducers<State, Name, ReducerPath, CreatorMap, CaseReducers>,
+        GetCaseReducers<
+          State,
+          Name,
+          ReducerPath,
+          CreatorMap & SliceCreatorMap,
+          CaseReducers
+        >,
         Name,
         CurrentReducerPath,
         Selectors
@@ -1173,7 +1225,13 @@ export function buildCreateSlice<
 
     const slice: Slice<
       State,
-      GetCaseReducers<State, Name, ReducerPath, CreatorMap, CaseReducers>,
+      GetCaseReducers<
+        State,
+        Name,
+        ReducerPath,
+        CreatorMap & SliceCreatorMap,
+        CaseReducers
+      >,
       Name,
       ReducerPath,
       Selectors

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

@@ -12,7 +12,6 @@ import type {
   ReducerCreatorEntry,
   ReducerCreators,
   ReducerDefinition,
-  ReducerDetails,
   ReducerHandlingContext,
   SliceActionType,
   ThunkAction,
@@ -36,6 +35,7 @@ import {
   mockConsole,
 } from 'console-testing-library/pure'
 import type { IfMaybeUndefined, NoInfer } from '../tsHelpers'
+import { delay } from 'msw'
 enablePatches()
 
 type CreateSlice = typeof createSlice
@@ -746,7 +746,9 @@ describe('createSlice', () => {
             addLoader: loaderCreator.create({}),
           }),
         }),
-      ).toThrowErrorMatchingInlineSnapshot(`[Error: Unsupported reducer type: Symbol(loaderCreatorType)]`)
+      ).toThrowErrorMatchingInlineSnapshot(
+        `[Error: Unsupported reducer type: Symbol(loaderCreatorType)]`,
+      )
       const createAppSlice = buildCreateSlice({
         creators: { loader: loaderCreator },
       })
@@ -1101,6 +1103,23 @@ describe('createSlice', () => {
         )
       })
     })
+    test('creators can be provided per createSlice call', () => {
+      const loaderSlice = createSlice({
+        name: 'loader',
+        initialState: {} as Partial<Record<string, true>>,
+        creators: { loader: loaderCreator },
+        reducers: (create) => ({
+          addLoader: create.loader({}),
+        }),
+      })
+      expect(loaderSlice.actions.addLoader).toEqual(expect.any(Function))
+      expect(loaderSlice.actions.addLoader.started).toEqual(
+        expect.any(Function),
+      )
+      expect(loaderSlice.actions.addLoader.started.type).toBe(
+        'loader/addLoader/started',
+      )
+    })
   })
 })