mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
Added exercises
This commit is contained in:
@@ -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
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { createStore } from 'redux';
|
||||
import { reducer } from '.';
|
||||
import { actions } from '../actions';
|
||||
|
||||
describe('reducers', () => {
|
||||
it('should add items', () => {
|
||||
// 1. Use Redux's createStore() to create a store. Pass in a reducer along with the initial state.
|
||||
//
|
||||
// 2. Call store.dispatch() with some action messages to indicate the kind of
|
||||
// action to perform (in this case, addTodo)
|
||||
//
|
||||
// 3. Assert with expect() on the resultant store.getState().todos
|
||||
});
|
||||
|
||||
// Tests left for you to write:
|
||||
// - remove
|
||||
// - clear
|
||||
// - complete
|
||||
});
|
||||
Reference in New Issue
Block a user