Infer RootState type from RootReducer

README.md

@@ -479,7 +479,7 @@ export const withState = <P extends WrappedComponentProps>(
     }
 
     render() {
-      const { ...remainingProps } = this.props;
+      const remainingProps = Object.assign({}, this.props);
       const { count } = this.state;
 
       return (
@@ -556,7 +556,7 @@ export const withErrorBoundary = <P extends WrappedComponentProps>(
     }
 
     render() {
-      const { children, ...remainingProps } = this.props;
+      const { children, ...remainingProps } = this.props as any;
       const { error } = this.state;
 
       if (error) {
@@ -958,29 +958,30 @@ describe('Todos Logic', () => {
 ### Create Root State and Root Action Types
 
 #### `RootState` - interface representing redux state tree
-Can be imported in connected components to provide type-safety to Redux `connect` function
+Can be imported in connected components to provide type-safety to Redux `connect` function.
+
+Because the RootState is the sum of it's reducers' return types (plus any store Enhancers we may choose to append), TypeScript can infer its shape entirely from Lookup Types and `ReturnType<>`. 
 
 ```tsx
 import { combineReducers } from 'redux';
-import { routerReducer, RouterState } from 'react-router-redux';
-
-import { countersReducer, CountersState } from '@src/redux/counters';
-import { todosReducer, TodosState } from '@src/redux/todos';
+import { routerReducer } from 'react-router-redux';
 
-interface StoreEnhancerState { }
-
-export interface RootState extends StoreEnhancerState {
-  router: RouterState;
-  counters: CountersState;
-  todos: TodosState;
-}
+import { countersReducer } from '@src/redux/counters';
+import { todosReducer} from '@src/redux/todos';
 
 import { RootAction } from '@src/redux';
-export const rootReducer = combineReducers<RootState, RootAction>({
+
+const reducerMap = {
   router: routerReducer,
   counters: countersReducer,
   todos: todosReducer,
-});
+};
+
+interface StoreEnhancerState { }
+
+export type RootState = { [K in keyof typeof reducerMap]: ReturnType<typeof reducerMap[K]> } & StoreEnhancerState;
+
+export const rootReducer = combineReducers<RootState, RootAction>(reducerMap);
 
 ```
 

docs/markdown/2_redux.md

@@ -93,7 +93,9 @@ state.counterPairs[0].immutableCounter2 = 1; // Error, cannot be mutated
 ### Create Root State and Root Action Types
 
 #### `RootState` - interface representing redux state tree
-Can be imported in connected components to provide type-safety to Redux `connect` function
+Can be imported in connected components to provide type-safety to Redux `connect` function.
+
+Because the RootState is the sum of it's reducers' return types (plus any store Enhancers we may choose to append), TypeScript can infer its shape entirely from Lookup Types and `ReturnType<>`. 
 
 ::example='../../playground/src/redux/root-reducer.ts'::
 

playground/package.json

@@ -56,7 +56,7 @@
     "ts-jest": "22.0.1",
     "tslint": "5.8.0",
     "tslint-react": "3.3.3",
-    "typescript": "2.7.2",
+    "typescript": "2.8.3",
     "webpack": "3.10.0",
     "webpack-blocks": "1.0.0-rc.2"
   }

playground/src/hoc/with-error-boundary.tsx

@@ -36,7 +36,7 @@ export const withErrorBoundary = <P extends WrappedComponentProps>(
     }
 
     render() {
-      const { children, ...remainingProps } = this.props;
+      const { children, ...remainingProps } = this.props as any;
       const { error } = this.state;
 
       if (error) {

playground/src/hoc/with-state.tsx

@@ -31,7 +31,7 @@ export const withState = <P extends WrappedComponentProps>(
     }
 
     render() {
-      const { ...remainingProps } = this.props;
+      const remainingProps = Object.assign({}, this.props);
       const { count } = this.state;
 
       return (

playground/src/redux/root-reducer.ts

@@ -1,20 +1,19 @@
 import { combineReducers } from 'redux';
-import { routerReducer, RouterState } from 'react-router-redux';
+import { routerReducer } from 'react-router-redux';
 
-import { countersReducer, CountersState } from '@src/redux/counters';
-import { todosReducer, TodosState } from '@src/redux/todos';
-
-interface StoreEnhancerState { }
-
-export interface RootState extends StoreEnhancerState {
-  router: RouterState;
-  counters: CountersState;
-  todos: TodosState;
-}
+import { countersReducer } from '@src/redux/counters';
+import { todosReducer} from '@src/redux/todos';
 
 import { RootAction } from '@src/redux';
-export const rootReducer = combineReducers<RootState, RootAction>({
+
+const reducerMap = {
   router: routerReducer,
   counters: countersReducer,
   todos: todosReducer,
-});
+};
+
+interface StoreEnhancerState { }
+
+export type RootState = { [K in keyof typeof reducerMap]: ReturnType<typeof reducerMap[K]> } & StoreEnhancerState;
+
+export const rootReducer = combineReducers<RootState, RootAction>(reducerMap);

playground/yarn.lock

@@ -7211,9 +7211,9 @@ [email protected]:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/typesafe-actions/-/typesafe-actions-1.1.2.tgz#af88ede3ee254be425c3e0e02de11b182830ae48"
 
-typescript@2.7.2:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.2.tgz#2d615a1ef4aee4f574425cdff7026edf81919836"
+typescript@2.8.3:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.3.tgz#5d817f9b6f31bb871835f4edf0089f21abe6c170"
 
 typescript@^2.4.2:
   version "2.6.2"