adding a redux todo list to playground

playground/src/actions/index.ts

@@ -0,0 +1,15 @@
+import { Action, ActionCreator } from 'redux';
+
+export type ActionTypes = 'add' | 'remove' | 'edit' | 'complete' | 'completeAll' | 'clear' | 'filter';
+type TodoActionCreator = ActionCreator<Action<ActionTypes>>;
+export interface TodoAction extends Action<ActionTypes> {
+  [extraProps: string]: any;
+}
+
+export const add = (label: string): TodoAction => ({ type: 'add', label });
+export const remove = (id: string): TodoAction => ({ type: 'remove', id });
+export const edit = (id: string, label: string): TodoAction => ({ type: 'edit', id, label });
+export const complete = (id: string): TodoAction => ({ type: 'complete', id });
+export const completeAll = (): TodoAction => ({ type: 'completeAll' });
+export const clear = (): TodoAction => ({ type: 'clear' });
+export const filter = (filterTypes: string): TodoAction => ({ type: 'filter', filterTypes });

playground/src/components/TodoApp.tsx

@@ -1,17 +1,24 @@
 import React from 'react';
-import { Stack, Text } from '@uifabric/experiments';
-import { TodoList } from './TodoList';
+import { Stack } from '@uifabric/experiments';
 import { TodoFooter } from './TodoFooter';
-import { Pivot, PivotItem } from 'office-ui-fabric-react';
 import { TodoHeader } from './TodoHeader';
+import { TodoList } from './TodoList';
+import { TodoItem, FilterTypes } from '../store';
 
-export class TodoApp extends React.Component {
+export interface TodoAppProps {
+  todos: { [id: string]: TodoItem };
+  filter: FilterTypes;
+}
+
+export class TodoApp extends React.Component<TodoAppProps> {
   render() {
+    const { todos, filter } = this.props;
+
     return (
       <Stack horizontalAlign="center">
         <Stack style={{ width: 650 }} verticalGap={25}>
           <TodoHeader />
-          <TodoList />
+          <TodoList {...{ todos, filter }} />
           <TodoFooter />
         </Stack>
       </Stack>

playground/src/components/TodoAppContainer.tsx

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

playground/src/components/TodoFooter.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Text, Stack } from '@uifabric/experiments';
-import { Checkbox, Button, Pivot, PivotItem } from 'office-ui-fabric-react';
 
 export interface TodoFooterProps {}
 

playground/src/components/TodoHeader.tsx

@@ -8,7 +8,7 @@ export const TodoHeader = (props: TodoFooterProps) => {
   return (
     <Stack>
       <Stack horizontal horizontalAlign="center">
-        <Text variant="large">Yet Another To Do Example Application</Text>
+        <Text variant="xxLarge">todos</Text>
       </Stack>
 
       <TextField placeholder="What needs to be done?" />

playground/src/components/TodoList.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { Stack } from '@uifabric/experiments';
 import { TodoListItem } from './TodoListItem';
-import { Pivot, PivotItem } from 'office-ui-fabric-react';
+import { TodoItem, FilterTypes } from '../store';
 
-export class TodoList extends React.Component {
+export interface TodoListProps {
+  todos: { [id: string]: TodoItem };
+  filter: FilterTypes;
+}
+
+export class TodoList extends React.Component<TodoListProps> {
   render() {
+    const { filter, todos } = this.props;
     return (
       <Stack verticalGap={10}>
-        <TodoListItem checked={false} label="nothing" />
-        <TodoListItem checked={false} label="nothing" />
-        <TodoListItem checked={false} label="nothing" />
-        <TodoListItem checked={false} label="nothing" />
+        {Object.keys(todos).map(id => {
+          const todo = todos[id];
+          return <TodoListItem key={id} checked={todo.completed} label={todo.label} />;
+        })}
       </Stack>
     );
   }

playground/src/index.tsx

@@ -1,5 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { TodoApp } from './components/TodoApp';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { reducer } from './reducers';
+import TodoAppContainer from './components/TodoAppContainer';
 
-ReactDOM.render(<TodoApp />, document.getElementById('app'));
+const store = createStore(reducer);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <TodoAppContainer />
+  </Provider>,
+  document.getElementById('app')
+);

playground/src/reducers/createReducer.ts

@@ -0,0 +1,15 @@
+import { Reducer } from 'redux';
+import { ActionTypes, TodoAction } from '../actions';
+
+export function createReducer<T>(
+  initialState: T,
+  handlers: { [actionType in ActionTypes]?: (state: T, action: TodoAction) => T }
+): Reducer<T> {
+  return function reducer(state = initialState, action: TodoAction): T {
+    if (handlers.hasOwnProperty(action.type)) {
+      return handlers[action.type](state, action);
+    } else {
+      return state;
+    }
+  };
+}

playground/src/reducers/index.ts

@@ -0,0 +1,22 @@
+import { createReducer } from './createReducer';
+import { Store, FilterTypes } from '../store';
+import { combineReducers } from 'redux';
+
+let counter = 0;
+
+export const reducer = combineReducers<Store>({
+  todos: createReducer(
+    {},
+    {
+      add(state, action) {
+        const id = String(counter++);
+        return { ...state, [id]: { label: action.label, completed: false } };
+      }
+    }
+  ),
+  filter: createReducer<FilterTypes>('all', {
+    filter(state, action) {
+      return action.filter;
+    }
+  })
+});

playground/src/store/index.ts

@@ -0,0 +1,14 @@
+export type FilterTypes = 'all' | 'active' | 'completed';
+
+export interface TodoItem {
+  label: string;
+  completed: boolean;
+}
+
+export interface Store {
+  todos: {
+    [id: string]: TodoItem;
+  };
+
+  filter: FilterTypes;
+}