added demo code to step 5

step2-05/exercise/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/exercise/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/exercise/src/reducers/index.ts

@@ -1,16 +1,43 @@
 import { Store } from '../store';
-import { addTodo, remove, complete } 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 };
+    },
 
-    // Fill in the blanks here for:
-    // - remove
-    // - complete
-    // - clear
+    remove(state, action) {
+      delete state[action.id];
+    },
+
+    clear(state, action) {
+      state[action.id].completed = !state[action.id].completed;
+    },
+
+    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/exercise/src/reducers/pureFunctions.spec.ts

@@ -1,25 +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);
-
-    // make sure that adding an item would not result in the same instance of state
-    // TODO: uncomment the below to get started
-    /*
-    
-    expect(newState).not.toBe(state);
-
-    expect(keys.length).toBe(1);
-    expect(newState[keys[0]].label).toBe('item1');
-    expect(newState[keys[0]].completed).toBeFalsy();
-    */
-  });
-
-  // TODO: add a test for remove()
-});

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

@@ -1,39 +0,0 @@
-import { Store, FilterTypes } from '../store';
-
-export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
-  // Write code to clone the state object while inserting a new TodoItem inside
-  // - the new object must be of the type TodoItem
-  // - the new state should be cloned using the spread syntax
-  // - return the new state
-
-  return state;
-}
-
-export function remove(state: Store['todos'], id: string) {
-  // Write code:
-  // - to clone the state object into new state object
-  // - remove and item from the new state by using the "delete" keyword
-  // - return the new state
-
-  return state;
-}
-
-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;
-}