battled and won typings

playground/src/actions/index.ts

@@ -1,15 +1,23 @@
-import { Action, ActionCreator } from 'redux';
+import { Action } from 'redux';
 
-export type ActionTypes = 'add' | 'remove' | 'edit' | 'complete' | 'completeAll' | 'clear' | 'filter';
+type ActionWithPayload<T, P> = Action<T> & P;
 
-export interface TodoAction extends Action<ActionTypes> {
+function action<T extends string>(type: T): Action<T>;
-  [extraProps: string]: any;
+function action<T extends string, P>(type: T, payload: P): ActionWithPayload<T, P>;
+function action<T extends string, P>(type: T, payload?: P) {
+  return { type, ...payload };
 }
 
-export const add = (label: string): TodoAction => ({ type: 'add', label });
+export const add = (label: string) => action('add', { label });
-export const remove = (id: string): TodoAction => ({ type: 'remove', id });
+export const remove = (id: string) => ({ type: 'remove' as 'remove', id });
-export const edit = (id: string, label: string): TodoAction => ({ type: 'edit', id, label });
+export const edit = (id: string, label: string) => ({ type: 'edit' as 'edit', id, label });
-export const complete = (id: string): TodoAction => ({ type: 'complete', id });
+export const complete = (id: string) => ({ type: 'complete' as 'complete', id });
-export const completeAll = (): TodoAction => ({ type: 'completeAll' });
+export const completeAll = () => ({ type: 'completeAll' as 'completeAll' });
-export const clear = (): TodoAction => ({ type: 'clear' });
+export const clear = () => ({ type: 'clear' as 'clear' });
-export const filter = (filterTypes: string): TodoAction => ({ type: 'filter', filter: filterTypes });
+export const filter = (filterTypes: string) => ({ type: 'filter' as 'filter', filter: filterTypes });
+
+export const actions = { add, remove, edit, complete, completeAll, clear, filter };
+
+export type ActionTypes = ReturnType<typeof actions[keyof typeof actions]>['type'];
+export type TodoAction = ReturnType<typeof actions[ActionTypes]>;
+export type TodoActionLookup = { [a in ActionTypes]: ReturnType<typeof actions[a]> };

playground/src/components/TodoAppContainer.tsx

@@ -1,4 +1,4 @@
-import * as actions from '../actions';
+import { actions, TodoAction } from '../actions';
 import { Store, FilterTypes } from '../store';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
@@ -11,7 +11,7 @@ export function mapStateToProps({ todos, filter }: Store) {
   };
 }
 
-export function mapDispatchToProps(dispatch: Dispatch<actions.TodoAction>) {
+export function mapDispatchToProps(dispatch: Dispatch<TodoAction>) {
   return {
     add: (label: string) => dispatch(actions.add(label)),
     remove: (id: string) => dispatch(actions.remove(id)),

playground/src/components/TodoList.tsx

@@ -14,21 +14,27 @@ export interface TodoListProps {
 export class TodoList extends React.Component<TodoListProps> {
   render() {
     const { filter, todos } = this.props;
-    let filteredTodos = todos;
+    let filteredTodos: typeof todos = {};
 
     switch (filter) {
       case 'completed':
-        filteredTodos = Object.keys(todos).reduce(
+        Object.keys(todos).forEach(id => {
-          (collection, id) => (todos[id].completed ? { ...collection, id: todos[id] } : collection),
+          if (todos[id].completed) {
-          {}
+            filteredTodos[id] = todos[id];
-        );
+          }
+        });
         break;
 
       case 'active':
-        filteredTodos = Object.keys(todos).reduce(
+        Object.keys(todos).forEach(id => {
-          (collection, id) => (!todos[id].completed ? { ...collection, id: todos[id] } : collection),
+          if (!todos[id].completed) {
-          {}
+            filteredTodos[id] = todos[id];
-        );
+          }
+        });
+        break;
+
+      default:
+        filteredTodos = todos;
         break;
     }
 

playground/src/reducers/createReducer.ts

@@ -1,9 +1,9 @@
 import { Reducer } from 'redux';
-import { ActionTypes, TodoAction } from '../actions';
+import { ActionTypes, TodoAction, TodoActionLookup } from '../actions';
 import { Draft, produce } from 'immer';
 
-export type ImmerReducer<T> = (state: Draft<T>, action: TodoAction) => T;
+export type ImmerReducer<T, A = any> = (state: Draft<T>, action: A) => T;
-export type HandlerMap<T> = { [actionType in ActionTypes]?: ImmerReducer<T> };
+export type HandlerMap<T> = { [actionType in ActionTypes]?: ImmerReducer<T, TodoActionLookup[actionType]> };
 
 function isHandlerFunction<T>(handlerOrMap: HandlerMap<T> | ImmerReducer<T>): handlerOrMap is ImmerReducer<T> {
   if (typeof handlerOrMap === 'function') {
@@ -13,12 +13,16 @@ function isHandlerFunction<T>(handlerOrMap: HandlerMap<T> | ImmerReducer<T>): ha
   return false;
 }
 
-export function createReducer<T>(initialState: T, handlerOrMap: HandlerMap<T> | ImmerReducer<T>): Reducer<T> {
+export function createReducer<T, AType extends ActionTypes | never = never>(
-  return function reducer(state = initialState, action: TodoAction): T {
+  initialState: T,
+  handlerOrMap: HandlerMap<T> | ImmerReducer<T, TodoActionLookup[AType]>
+): Reducer<T> {
+  return function reducer(state = initialState, action: TodoAction | TodoActionLookup[AType]): T {
     if (isHandlerFunction(handlerOrMap)) {
-      return produce(state, draft => handlerOrMap(draft, action));
+      return produce(state, draft => handlerOrMap(draft, action as TodoActionLookup[AType]));
     } else if (handlerOrMap.hasOwnProperty(action.type)) {
-      return produce(state, draft => handlerOrMap[action.type](draft, action));
+      const handler = handlerOrMap[action.type] as ImmerReducer<T>;
+      return produce(state, draft => handler(draft, action));
     } else {
       return state;
     }

playground/src/reducers/index.ts

@@ -2,6 +2,7 @@ import { createReducer } from './createReducer';
 import { Store, FilterTypes } from '../store';
 import { combineReducers } from 'redux';
 import produce from 'immer';
+import { edit } from '../actions';
 
 let counter = 0;
 
@@ -32,10 +33,15 @@ export const reducer = combineReducers<Store>({
           }
         });
         return draft;
+      },
+
+      edit(draft, action) {
+        draft[action.id].label = action.label;
+        return draft;
       }
     }
   ),
-  filter: createReducer<Store['filter']>('all', (draft, action) => {
+  filter: createReducer<Store['filter'], 'filter'>('all', (draft, action) => {
-    return action.filter;
+    return action.filter as FilterTypes;
   })
 });