majorly overhauled 2.8

step2-08/exercise/src/reducers/index.ts

@@ -2,6 +2,7 @@ import { Store } from '../store';
 import { addTodo, remove, complete, clear, setFilter } from './pureFunctions';
 import { combineReducers } from 'redux';
 
+// TODO: rewrite this with createReducer() function
 function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] {
   switch (action.type) {
     case 'addTodo':
@@ -20,9 +21,8 @@ function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] {
   return state;
 }
 
+// TODO: rewrite this with createReducer() function
 function filterReducer(state: Store['filter'] = 'all', action: any): Store['filter'] {
-  // TODO: fill in the blank here with a switch / case statement to return new filter state as specified in `action.filter` message
-
   return state;
 }
 

step2-08/exercise/src/reducers/pureFunctions.spec.ts

@@ -1,29 +0,0 @@
-import { addTodo, complete } 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();
-  });
-
-  it('can complete an item', () => {
-    const state = <Store['todos']>{};
-
-    let newState = addTodo(state, '0', 'item1');
-
-    const key = Object.keys(newState)[0];
-
-    newState = complete(newState, key);
-
-    expect(newState[key].completed).toBeTruthy();
-  });
-});

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

@@ -1,22 +1,17 @@
 import { Store, FilterTypes } from '../store';
 
-import produce from 'immer';
-
-export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
+// TODO: for all the "todos" functions here, rewrite with mutable state
+// 1. !!!IMPORTANT!!! change the signature of every function here to:
+//      function xyzAction(state: Store['todos'], action: any) { ... }
+//
+// 2. make sure NOT to return anything, just modify the "state" arg
+export function addTodo(state: Store['todos'], id: string, label: string) {
+  // hint: state[action.id] = ...
   return { ...state, [id]: { label, completed: false } };
 }
 
-/* For the bonus exercise
-
-export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
-  return produce(state, draft => {
-    // TODO: implement a simple obj key assignment here
-  });
-}
-
-*/
-
 export function remove(state: Store['todos'], id: string) {
+  // hint: delete state[action.id]
   const newTodos = { ...state };
 
   delete newTodos[id];
@@ -25,6 +20,7 @@ export function remove(state: Store['todos'], id: string) {
 }
 
 export function complete(state: Store['todos'], id: string) {
+  // hint: state[action.id].completed = ...
   const newTodos = { ...state };
   newTodos[id].completed = !newTodos[id].completed;
 
@@ -32,6 +28,7 @@ export function complete(state: Store['todos'], id: string) {
 }
 
 export function clear(state: Store['todos']) {
+  // hint: it's almost like the remove case above
   const newTodos = { ...state };
 
   Object.keys(state).forEach(key => {
@@ -43,6 +40,10 @@ export function clear(state: Store['todos']) {
   return newTodos;
 }
 
+// TODO: change the setFilter() to the new immer way
+// 1. change the signature of every function here to:
+//      function xyzAction(state: Store['todos'], action: any) { ... }
+// 2. make sure to return action.filter without modifying state in this case
 export function setFilter(state: Store['filter'], filter: FilterTypes) {
   return filter;
 }