Update types with PreloadedState generic

Author: Methuselah96

packages/toolkit/package.json

@@ -118,7 +118,7 @@
   ],
   "dependencies": {
     "immer": "^9.0.16",
-    "redux": "5.0.0-alpha.2",
+    "redux": "Methuselah96/redux#head=preloaded-state-generic-4",
     "redux-thunk": "3.0.0-alpha.1",
     "reselect": "^4.1.7"
   },

packages/toolkit/src/configureStore.ts

@@ -7,8 +7,6 @@ import type {
   StoreEnhancer,
   Store,
   Dispatch,
-  PreloadedState,
-  CombinedState,
 } from 'redux'
 import { createStore, compose, applyMiddleware, combineReducers } from 'redux'
 import type { DevToolsEnhancerOptions as DevToolsOptions } from './devtoolsExtension'
@@ -21,7 +19,6 @@ import type {
 } from './getDefaultMiddleware'
 import { curryGetDefaultMiddleware } from './getDefaultMiddleware'
 import type {
-  NoInfer,
   ExtractDispatchExtensions,
   ExtractStoreExtensions,
 } from './tsHelpers'
@@ -45,14 +42,17 @@ export type ConfigureEnhancersCallback<E extends Enhancers = Enhancers> = (
 export interface ConfigureStoreOptions<
   S = any,
   A extends Action = AnyAction,
+  PreloadedState = S,
   M extends Middlewares<S> = Middlewares<S>,
   E extends Enhancers = Enhancers
 > {
   /**
    * A single reducer function that will be used as the root reducer, or an
    * object of slice reducers that will be passed to `combineReducers()`.
    */
-  reducer: Reducer<S, A> | ReducersMapObject<S, A>
+  reducer:
+    | Reducer<S, A, PreloadedState>
+    | ReducersMapObject<S, A, PreloadedState>
 
   /**
    * An array of Redux middleware to install. If not supplied, defaults to
@@ -87,7 +87,7 @@ export interface ConfigureStoreOptions<
     As we cannot distinguish between those two cases without adding another generic parameter,
     we just make the pragmatic assumption that the latter almost never happens.
   */
-  preloadedState?: PreloadedState<CombinedState<NoInfer<S>>>
+  preloadedState?: PreloadedState
 
   /**
    * The store enhancers to apply. See Redux's `createStore()`.
@@ -141,9 +141,12 @@ export type EnhancedStore<
 export function configureStore<
   S = any,
   A extends Action = AnyAction,
+  PreloadedState = S,
   M extends Middlewares<S> = [ThunkMiddlewareFor<S>],
   E extends Enhancers = [StoreEnhancer]
->(options: ConfigureStoreOptions<S, A, M, E>): EnhancedStore<S, A, M, E> {
+>(
+  options: ConfigureStoreOptions<S, A, PreloadedState, M, E>
+): EnhancedStore<S, A, M, E> {
   const curriedGetDefaultMiddleware = curryGetDefaultMiddleware<S>()
 
   const {
@@ -154,12 +157,16 @@ export function configureStore<
     enhancers = undefined,
   } = options || {}
 
-  let rootReducer: Reducer<S, A>
+  let rootReducer: Reducer<S, A, PreloadedState>
 
   if (typeof reducer === 'function') {
     rootReducer = reducer
   } else if (isPlainObject(reducer)) {
-    rootReducer = combineReducers(reducer) as unknown as Reducer<S, A>
+    rootReducer = combineReducers(reducer) as unknown as Reducer<
+      S,
+      A,
+      PreloadedState
+    >
   } else {
     throw new Error(
       '"reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers'

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

@@ -8,7 +8,7 @@ import type {
   Action,
   StoreEnhancer,
 } from 'redux'
-import { applyMiddleware } from 'redux'
+import { applyMiddleware, combineReducers } from 'redux'
 import type { PayloadAction, ConfigureStoreOptions } from '@reduxjs/toolkit'
 import {
   configureStore,
@@ -130,8 +130,8 @@ const _anyMiddleware: any = () => () => () => {}
   })
 
   configureStore({
-    reducer: () => 0,
     // @ts-expect-error
+    reducer: (_: number) => 0,
     preloadedState: 'non-matching state type',
   })
 }
@@ -197,25 +197,162 @@ const _anyMiddleware: any = () => () => () => {}
 }
 
 /**
- * Test: configureStore() state type inference works when specifying both a
- * reducer object and a partial preloaded state.
+ * Test: Preloaded state typings
  */
 {
   let counterReducer1: Reducer<number> = () => 0
   let counterReducer2: Reducer<number> = () => 0
 
-  const store = configureStore({
-    reducer: {
-      counter1: counterReducer1,
-      counter2: counterReducer2,
-    },
-    preloadedState: {
-      counter1: 0,
-    },
-  })
+  /**
+   * Test: partial preloaded state
+   */
+  {
+    const store = configureStore({
+      reducer: {
+        counter1: counterReducer1,
+        counter2: counterReducer2,
+      },
+      preloadedState: {
+        counter1: 0,
+      },
+    })
+
+    const counter1: number = store.getState().counter1
+    const counter2: number = store.getState().counter2
+  }
+
+  /**
+   * Test: empty preloaded state
+   */
+  {
+    const store = configureStore({
+      reducer: {
+        counter1: counterReducer1,
+        counter2: counterReducer2,
+      },
+      preloadedState: {},
+    })
+
+    const counter1: number = store.getState().counter1
+    const counter2: number = store.getState().counter2
+  }
+
+  /**
+   * Test: excess properties in preloaded state
+   */
+  {
+    const store = configureStore({
+      reducer: {
+        // @ts-expect-error
+        counter1: counterReducer1,
+        counter2: counterReducer2,
+      },
+      preloadedState: {
+        counter1: 0,
+        counter3: 5,
+      },
+    })
+
+    const counter1: number = store.getState().counter1
+    const counter2: number = store.getState().counter2
+  }
+
+  /**
+   * Test: mismatching properties in preloaded state
+   */
+  {
+    const store = configureStore({
+      reducer: {
+        // @ts-expect-error
+        counter1: counterReducer1,
+        counter2: counterReducer2,
+      },
+      preloadedState: {
+        counter3: 5,
+      },
+    })
+
+    const counter1: number = store.getState().counter1
+    const counter2: number = store.getState().counter2
+  }
+
+  /**
+   * Test: string preloaded state when expecting object
+   */
+  {
+    const store = configureStore({
+      reducer: {
+        // @ts-expect-error
+        counter1: counterReducer1,
+        counter2: counterReducer2,
+      },
+      preloadedState: 'test',
+    })
+
+    const counter1: number = store.getState().counter1
+    const counter2: number = store.getState().counter2
+  }
 
-  const counter1: number = store.getState().counter1
-  const counter2: number = store.getState().counter2
+  /**
+   * Test: nested combineReducers allows partial
+   */
+  {
+    const store = configureStore({
+      reducer: {
+        group1: combineReducers({
+          counter1: counterReducer1,
+          counter2: counterReducer2,
+        }),
+        group2: combineReducers({
+          counter1: counterReducer1,
+          counter2: counterReducer2,
+        }),
+      },
+      preloadedState: {
+        group1: {
+          counter1: 5,
+        },
+      },
+    })
+
+    const group1counter1: number = store.getState().group1.counter1
+    const group1counter2: number = store.getState().group1.counter2
+    const group2counter1: number = store.getState().group2.counter1
+    const group2counter2: number = store.getState().group2.counter2
+  }
+
+  /**
+   * Test: non-nested combineReducers does not allow partial
+   */
+  {
+    interface GroupState {
+      counter1: number
+      counter2: number
+    }
+
+    const initialState = { counter1: 0, counter2: 0 }
+
+    const group1Reducer: Reducer<GroupState> = (state = initialState) => state
+    const group2Reducer: Reducer<GroupState> = (state = initialState) => state
+
+    const store = configureStore({
+      reducer: {
+        // @ts-expect-error
+        group1: group1Reducer,
+        group2: group2Reducer,
+      },
+      preloadedState: {
+        group1: {
+          counter1: 5,
+        },
+      },
+    })
+
+    const group1counter1: number = store.getState().group1.counter1
+    const group1counter2: number = store.getState().group1.counter2
+    const group2counter1: number = store.getState().group2.counter1
+    const group2counter2: number = store.getState().group2.counter2
+  }
 }
 
 /**

yarn.lock

@@ -6781,7 +6781,7 @@ __metadata:
     node-fetch: ^2.6.1
     prettier: ^2.2.1
     query-string: ^7.0.1
-    redux: 5.0.0-alpha.2
+    redux: "Methuselah96/redux#head=preloaded-state-generic-4"
     redux-thunk: 3.0.0-alpha.1
     reselect: ^4.1.7
     rimraf: ^3.0.2
@@ -24426,10 +24426,10 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"redux@npm:5.0.0-alpha.2":
+"redux@Methuselah96/redux#head=preloaded-state-generic-4":
   version: 5.0.0-alpha.2
-  resolution: "redux@npm:5.0.0-alpha.2"
-  checksum: fbae31c55bab62a210a5a24a64721f593080fb94808c547b646ddff91515f8ab4e3363af5ece16491f0179d43729fc0350235c9fea7500b37b67d762a55b6945
+  resolution: "redux@https://github.com/Methuselah96/redux.git#commit=bd3278b135f451c5ccb692fb47a10687c238301b"
+  checksum: 98fb95c9a3981afe887b680cfd042003f81b16f8d13a1085e1d6952bc5d354e2bcae4c855c2e6f72d08b240e539edf9b2f839ffaf12ad71bdbb253abb97810fd
   languageName: node
   linkType: hard