Revert adding the store as a return type to replaceReducer

Author: Methuselah96

src/createStore.ts

@@ -5,8 +5,7 @@ import {
   PreloadedState,
   StoreEnhancer,
   Dispatch,
-  Observer,
-  ExtendState
+  Observer
 } from './types/store'
 import { Action } from './types/actions'
 import { Reducer } from './types/reducers'
@@ -47,7 +46,7 @@ export default function createStore<
 >(
   reducer: Reducer<S, A>,
   enhancer?: StoreEnhancer<Ext, StateExt>
-): Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
+): Store<S, A, StateExt> & Ext
 export default function createStore<
   S,
   A extends Action,
@@ -57,7 +56,7 @@ export default function createStore<
   reducer: Reducer<S, A>,
   preloadedState?: PreloadedState<S>,
   enhancer?: StoreEnhancer<Ext, StateExt>
-): Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
+): Store<S, A, StateExt> & Ext
 export default function createStore<
   S,
   A extends Action,
@@ -67,7 +66,7 @@ export default function createStore<
   reducer: Reducer<S, A>,
   preloadedState?: PreloadedState<S> | StoreEnhancer<Ext, StateExt>,
   enhancer?: StoreEnhancer<Ext, StateExt>
-): Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext {
+): Store<S, A, StateExt> & Ext {
   if (typeof reducer !== 'function') {
     throw new Error(
       `Expected the root reducer to be a function. Instead, received: '${kindOf(
@@ -104,7 +103,7 @@ export default function createStore<
     return enhancer(createStore)(
       reducer,
       preloadedState as PreloadedState<S>
-    ) as Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
+    ) as Store<S, A, StateExt> & Ext
   }
 
   let currentReducer = reducer
@@ -278,11 +277,8 @@ export default function createStore<
    * implement a hot reloading mechanism for Redux.
    *
    * @param nextReducer The reducer for the store to use instead.
-   * @returns The same store instance with a new reducer in place.
    */
-  function replaceReducer<NewState, NewActions extends A>(
-    nextReducer: Reducer<NewState, NewActions>
-  ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext {
+  function replaceReducer(nextReducer: Reducer<S, A>): void {
     if (typeof nextReducer !== 'function') {
       throw new Error(
         `Expected the nextReducer to be a function. Instead, received: '${kindOf(
@@ -291,22 +287,13 @@ export default function createStore<
       )
     }
 
-    // TODO: do this more elegantly
-    ;(currentReducer as unknown as Reducer<NewState, NewActions>) = nextReducer
+    currentReducer = nextReducer
 
     // This action has a similar effect to ActionTypes.INIT.
     // Any reducers that existed in both the new and old rootReducer
     // will receive the previous state. This effectively populates
     // the new state tree with any relevant data from the old one.
     dispatch({ type: ActionTypes.REPLACE } as A)
-    // change the type of the store by casting it to the new store
-    return store as unknown as Store<
-      ExtendState<NewState, StateExt>,
-      NewActions,
-      StateExt,
-      Ext
-    > &
-      Ext
   }
 
   /**
@@ -364,6 +351,6 @@ export default function createStore<
     getState,
     replaceReducer,
     [$$observable]: observable
-  } as unknown as Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
+  } as unknown as Store<S, A, StateExt> & Ext
   return store
 }

src/types/store.ts

@@ -131,13 +131,11 @@ export type Observer<T> = {
  * @template S The type of state held by this store.
  * @template A the type of actions which may be dispatched by this store.
  * @template StateExt any extension to state from store enhancers
- * @template Ext any extensions to the store from store enhancers
  */
 export interface Store<
   S = any,
   A extends Action = AnyAction,
-  StateExt = never,
-  Ext = {}
+  StateExt = never
 > {
   /**
    * Dispatches an action. It is the only way to trigger a state change.
@@ -172,7 +170,7 @@ export interface Store<
    *
    * @returns The current state tree of your application.
    */
-  getState(): S
+  getState(): ExtendState<S, StateExt>
 
   /**
    * Adds a change listener. It will be called any time an action is
@@ -209,17 +207,15 @@ export interface Store<
    *
    * @param nextReducer The reducer for the store to use instead.
    */
-  replaceReducer<NewState, NewActions extends Action>(
-    nextReducer: Reducer<NewState, NewActions>
-  ): Store<ExtendState<NewState, StateExt>, NewActions, StateExt, Ext> & Ext
+  replaceReducer(nextReducer: Reducer<S, A>): void
 
   /**
    * Interoperability point for observable/reactive libraries.
    * @returns {observable} A minimal observable of state changes.
    * For more information, see the observable proposal:
    * https://github.com/tc39/proposal-observable
    */
-  [Symbol.observable](): Observable<S>
+  [Symbol.observable](): Observable<ExtendState<S, StateExt>>
 }
 
 /**
@@ -237,12 +233,12 @@ export interface StoreCreator {
   <S, A extends Action, Ext = {}, StateExt = never>(
     reducer: Reducer<S, A>,
     enhancer?: StoreEnhancer<Ext, StateExt>
-  ): Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
+  ): Store<S, A, StateExt> & Ext
   <S, A extends Action, Ext = {}, StateExt = never>(
     reducer: Reducer<S, A>,
     preloadedState?: PreloadedState<S>,
     enhancer?: StoreEnhancer<Ext>
-  ): Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
+  ): Store<S, A, StateExt> & Ext
 }
 
 /**
@@ -275,4 +271,4 @@ export type StoreEnhancerStoreCreator<Ext = {}, StateExt = never> = <
 >(
   reducer: Reducer<S, A>,
   preloadedState?: PreloadedState<S>
-) => Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext
+) => Store<S, A, StateExt> & Ext

test/combineReducers.spec.ts

@@ -1,11 +1,13 @@
 /* eslint-disable no-console */
 import {
-  createStore,
-  combineReducers,
-  Reducer,
+  __DO_NOT_USE__ActionTypes as ActionTypes,
+  Action,
   AnyAction,
-  __DO_NOT_USE__ActionTypes as ActionTypes
+  combineReducers,
+  createStore,
+  Reducer
 } from '..'
+import { combineReducersAccuratelyTyped } from './helpers/combineReducersTypes'
 
 describe('Utils', () => {
   describe('combineReducers', () => {
@@ -327,61 +329,93 @@ describe('Utils', () => {
       const ACTION = { type: 'ACTION' }
 
       it('should return an updated state when additional reducers are passed to combineReducers', function () {
-        const originalCompositeReducer = combineReducers({ foo })
+        type Reducers = {
+          foo: Reducer<{}, Action<unknown>>
+          bar?: Reducer<{}, Action<unknown>>
+        }
+
+        const originalCompositeReducer =
+          combineReducersAccuratelyTyped<Reducers>({ foo })
         const store = createStore(originalCompositeReducer)
 
         store.dispatch(ACTION)
 
         const initialState = store.getState()
 
-        store.replaceReducer(combineReducers({ foo, bar }))
+        store.replaceReducer(
+          combineReducersAccuratelyTyped<Reducers>({
+            foo,
+            bar
+          })
+        )
         store.dispatch(ACTION)
 
         const nextState = store.getState()
         expect(nextState).not.toBe(initialState)
       })
 
       it('should return an updated state when reducers passed to combineReducers are changed', function () {
+        type Reducers = {
+          foo?: Reducer<{}, Action<unknown>>
+          bar: Reducer<{}, Action<unknown>>
+          baz?: Reducer<{}, Action<unknown>>
+        }
+
         const baz = (state = {}) => state
 
-        const originalCompositeReducer = combineReducers({ foo, bar })
+        const originalCompositeReducer =
+          combineReducersAccuratelyTyped<Reducers>({
+            foo,
+            bar
+          })
         const store = createStore(originalCompositeReducer)
 
         store.dispatch(ACTION)
 
         const initialState = store.getState()
 
-        store.replaceReducer(combineReducers({ baz, bar }))
+        store.replaceReducer(
+          combineReducersAccuratelyTyped<Reducers>({ baz, bar })
+        )
         store.dispatch(ACTION)
 
         const nextState = store.getState()
         expect(nextState).not.toBe(initialState)
       })
 
       it('should return the same state when reducers passed to combineReducers not changed', function () {
-        const originalCompositeReducer = combineReducers({ foo, bar })
+        const originalCompositeReducer = combineReducersAccuratelyTyped({
+          foo,
+          bar
+        })
         const store = createStore(originalCompositeReducer)
 
         store.dispatch(ACTION)
 
         const initialState = store.getState()
 
-        store.replaceReducer(combineReducers({ foo, bar }))
+        store.replaceReducer(combineReducersAccuratelyTyped({ foo, bar }))
         store.dispatch(ACTION)
 
         const nextState = store.getState()
         expect(nextState).toBe(initialState)
       })
 
       it('should return an updated state when one of more reducers passed to the combineReducers are removed', function () {
-        const originalCompositeReducer = combineReducers({ foo, bar })
+        const originalCompositeReducer = combineReducersAccuratelyTyped<{
+          foo?: Reducer<{}, Action<unknown>>
+          bar: Reducer<{}, Action<unknown>>
+        }>({
+          foo,
+          bar
+        })
         const store = createStore(originalCompositeReducer)
 
         store.dispatch(ACTION)
 
         const initialState = store.getState()
 
-        store.replaceReducer(combineReducers({ bar }))
+        store.replaceReducer(combineReducersAccuratelyTyped({ bar }))
 
         const nextState = store.getState()
         expect(nextState).not.toBe(initialState)

test/createStore.spec.ts

@@ -1,4 +1,11 @@
-import { createStore, combineReducers, StoreEnhancer, Action, Store } from '..'
+import {
+  createStore,
+  combineReducers,
+  StoreEnhancer,
+  Action,
+  Store,
+  Reducer
+} from '..'
 import {
   addTodo,
   dispatchInMiddle,
@@ -12,6 +19,10 @@ import * as reducers from './helpers/reducers'
 import { from, ObservableInput } from 'rxjs'
 import { map } from 'rxjs/operators'
 import $$observable from '../src/utils/symbol-observable'
+import {
+  combineReducersAccuratelyTyped,
+  ReducerThatAllowsForPartialInputState
+} from './helpers/combineReducersTypes'
 
 describe('createStore', () => {
   it('exposes the public API', () => {
@@ -823,19 +834,30 @@ describe('createStore', () => {
     const originalConsoleError = console.error
     console.error = jest.fn()
 
+    type YState = { z: number; w?: number }
+
+    type Reducers = {
+      x?: Reducer<number, Action<unknown>>
+      y: ReducerThatAllowsForPartialInputState<
+        YState,
+        Action<unknown>,
+        Partial<YState> | undefined
+      >
+    }
+
     const store = createStore(
-      combineReducers({
+      combineReducersAccuratelyTyped<Reducers>({
         x: (s = 0, _) => s,
-        y: combineReducers({
+        y: combineReducersAccuratelyTyped({
           z: (s = 0, _) => s,
           w: (s = 0, _) => s
         })
       })
     )
 
     store.replaceReducer(
-      combineReducers({
-        y: combineReducers({
+      combineReducersAccuratelyTyped({
+        y: combineReducersAccuratelyTyped({
           z: (s = 0, _) => s
         })
       })

test/helpers/combineReducersTypes.ts

@@ -0,0 +1,59 @@
+import {
+  Action,
+  ActionFromReducersMapObject,
+  combineReducers,
+  Reducer,
+  ReducersMapObject
+} from '../..'
+
+/**
+ * The existing `Reducer` type assumes that the input state is `S` or `undefined`. This works for most cases, but
+ * `combineReducers` allows for properties in the input state to be missing. This type allows for that scenario and is
+ * used by `combineReducersAccuratelyTyped`. It can be removed if the `Reducer` type in the core library is updated to
+ * allow for this scenario.
+ */
+export type ReducerThatAllowsForPartialInputState<
+  S extends InputState,
+  A extends Action<unknown>,
+  InputState
+> = (state: InputState, action: A) => S
+
+type ReducersMapObjectThatAllowsForPartialInputState<
+  S extends InputState,
+  A extends Action<unknown>,
+  InputState
+> = {
+  [K in keyof InputState]: ReducerThatAllowsForPartialInputState<
+    S[K],
+    A,
+    InputState[K]
+  >
+}
+
+type StateFromReducersMapObjectThatAllowsForPartialInputState<
+  M extends ReducersMapObjectThatAllowsForPartialInputState<
+    unknown,
+    Action<unknown>,
+    unknown
+  >
+> = {
+  [P in keyof M]: M[P] extends Reducer<infer S, any> ? S : never
+}
+
+/**
+ * The `combineReducers` function creates a reducer that allows for missing properties in the input state at the
+ * top-level, but the types do not accurately reflect that. This method provides accurate types for
+ * `combineReducers` in order to get the tests that use `replaceReducer` to type-check successfully. This can be
+ * removed if the types for `combineReducers` are fixed.
+ */
+export function combineReducersAccuratelyTyped<M extends ReducersMapObject>(
+  reducers: M
+): (
+  state:
+    | Partial<StateFromReducersMapObjectThatAllowsForPartialInputState<M>>
+    | undefined,
+  action: ActionFromReducersMapObject<M>
+) => StateFromReducersMapObjectThatAllowsForPartialInputState<M> {
+  // @ts-ignore
+  return combineReducers(reducers)
+}