mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
adding exercise for step 5
This commit is contained in:
9
step2-05/exercise/src/index.tsx
Normal file
9
step2-05/exercise/src/index.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { reducer } from './reducers';
|
||||
import { createStore, compose } from 'redux';
|
||||
|
||||
declare var window: any;
|
||||
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
|
||||
|
||||
const store = createStore(reducer, {}, composeEnhancers());
|
||||
|
||||
console.log(store.getState());
|
||||
20
step2-05/exercise/src/reducers/index.ts
Normal file
20
step2-05/exercise/src/reducers/index.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Store } from '../store';
|
||||
import { addTodo, remove, complete, clear } from './pureFunctions';
|
||||
|
||||
export function reducer(state: Store['todos'], payload: any): Store['todos'] {
|
||||
switch (payload.type) {
|
||||
case 'addTodo':
|
||||
return addTodo(state, payload.id, payload.label);
|
||||
|
||||
case 'remove':
|
||||
return remove(state, payload.id);
|
||||
|
||||
case 'complete':
|
||||
return complete(state, payload.id);
|
||||
|
||||
case 'clear':
|
||||
return clear(state);
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
19
step2-05/exercise/src/reducers/pureFunctions.spec.ts
Normal file
19
step2-05/exercise/src/reducers/pureFunctions.spec.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
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();
|
||||
});
|
||||
|
||||
// test remove, complete and clear
|
||||
});
|
||||
38
step2-05/exercise/src/reducers/pureFunctions.ts
Normal file
38
step2-05/exercise/src/reducers/pureFunctions.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
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) {
|
||||
// Write code:
|
||||
// - to clone the state object into new state object
|
||||
// - create a clone of the state[id] into a new item object
|
||||
// - modify new state and set the id key to the value of the new item object
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
export function clear(state: Store['todos']) {
|
||||
// Write code:
|
||||
// - to clone the state object into new state object
|
||||
// - loop through the keys of the new state object
|
||||
// - remove those items inside that new state if the item is completed using the "delete" keyword
|
||||
// - return the new state
|
||||
|
||||
return state;
|
||||
}
|
||||
14
step2-05/exercise/src/store/index.ts
Normal file
14
step2-05/exercise/src/store/index.ts
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user