2.7 code

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

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

step2-07/demo/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-07/demo/src/reducers/pureFunctions.ts

@@ -1,35 +0,0 @@
-import { Store, FilterTypes } 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) {
-  const newTodos = { ...state };
-
-  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']) {
-  const newTodos = { ...state };
-
-  Object.keys(state).forEach(key => {
-    if (state[key].completed) {
-      delete newTodos[key];
-    }
-  });
-
-  return newTodos;
-}
-
-export function setFilter(state: Store['filter'], filter: FilterTypes) {
-  return filter;
-}