added demo code to step 5

step2-05/demo/src/actions/index.ts

@@ -0,0 +1,9 @@
+import nextId from 'uuid/v4';
+
+export const actions = {
+  addTodo: (label: string) => ({ type: 'addTodo', id: nextId(), label }),
+  remove: (id: string) => ({ type: 'remove', id }),
+  complete: (id: string) => ({ type: 'complete', id }),
+  clear: () => ({ type: 'clear' }),
+  setFilter: (filter: string) => ({ type: 'setFilter', filter })
+};

step2-05/demo/src/index.tsx

@@ -1,6 +1,15 @@
 import { reducer } from './reducers';
 import { createStore } from 'redux';
+import { actions } from './actions';
+import { composeWithDevTools } from 'redux-devtools-extension';
 
-const store = createStore(reducer);
+const store = createStore(reducer, {}, composeWithDevTools());
+
+store.dispatch(actions.addTodo('hello'));
+
+let action = actions.addTodo('world');
+store.dispatch(action);
+
+store.dispatch(actions.remove(action.id));
 
 console.log(store.getState());

step2-05/demo/src/reducers/index.ts

@@ -1,20 +1,43 @@
 import { Store } from '../store';
-import { addTodo, remove, complete, clear } from './pureFunctions';
+import { combineReducers } from 'redux';
+import { createReducer } from 'redux-starter-kit';
 
-export function reducer(state: Store['todos'], payload: any): Store['todos'] {
-  switch (payload.type) {
-    case 'addTodo':
-      return addTodo(state, payload.id, payload.label);
+export const todosReducer = createReducer<Store['todos']>(
+  {},
+  {
+    addTodo(state, action) {
+      state[action.id] = { label: action.label, completed: false };
+    },
 
-    case 'remove':
-      return remove(state, payload.id);
+    remove(state, action) {
+      delete state[action.id];
+    },
 
-    case 'complete':
-      return complete(state, payload.id);
+    clear(state, action) {
+      state[action.id].completed = !state[action.id].completed;
+    },
 
-    case 'clear':
-      return clear(state);
+    complete(state, action) {
+      Object.keys(state).forEach(key => {
+        if (state[key].completed) {
+          delete state[key];
+        }
+      });
+    },
+
+    edit(state, action) {
+      state[action.id].label = action.label;
+    }
   }
+);
 
-  return state;
-}
+export const filterReducer = createReducer<Store['filter']>('all', {
+  setFilter(state, action) {
+    return action.filter;
+  }
+});
+
+export const reducer = combineReducers({
+  todos: todosReducer,
+  filter: filterReducer
+});

step2-05/demo/src/reducers/pureFunctions.spec.ts

@@ -1,17 +0,0 @@
-import { addTodo } from './pureFunctions';
-import { Store } from '../store';
-
-describe('TodoApp reducers', () => {
-  it('can add an item', () => {
-    const state = <Store['todos']>{};
-
-    const newState = addTodo(state, '0', 'item1');
-
-    const keys = Object.keys(newState);
-
-    expect(newState).not.toBe(state);
-    expect(keys.length).toBe(1);
-    expect(newState[keys[0]].label).toBe('item1');
-    expect(newState[keys[0]].completed).toBeFalsy();
-  });
-});

step2-05/demo/src/reducers/pureFunctions.ts

@@ -1,35 +0,0 @@
-import { Store } from '../store';
-
-export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
-  return { ...state, [id]: { label, completed: false } };
-}
-
-export function remove(state: Store['todos'], id: string) {
-  // Clone the Todos
-  const newTodos = { ...state };
-
-  // Delete an item in the object by the key
-  delete newTodos[id];
-
-  return newTodos;
-}
-
-export function complete(state: Store['todos'], id: string) {
-  // Clone the todo, overriding
-  const newTodo = { ...state[id], completed: !state[id].completed };
-  return { ...state, [id]: newTodo };
-}
-
-export function clear(state: Store['todos']) {
-  // Clone the todos
-  const newTodos = { ...state };
-
-  // Delete all todos based on the completed flag, looping over the keys of the todos
-  Object.keys(state).forEach(key => {
-    if (state[key].completed) {
-      delete newTodos[key];
-    }
-  });
-
-  return newTodos;
-}