mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
checking in docs for github.io page
This commit is contained in:
9
docs/step2-05/demo/src/index.tsx
Normal file
9
docs/step2-05/demo/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
docs/step2-05/demo/src/reducers/index.ts
Normal file
20
docs/step2-05/demo/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;
|
||||
}
|
||||
17
docs/step2-05/demo/src/reducers/pureFunctions.spec.ts
Normal file
17
docs/step2-05/demo/src/reducers/pureFunctions.spec.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
32
docs/step2-05/demo/src/reducers/pureFunctions.ts
Normal file
32
docs/step2-05/demo/src/reducers/pureFunctions.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
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) {
|
||||
const newTodos = { ...state };
|
||||
newTodos[id].completed = !newTodos[id].completed;
|
||||
|
||||
return newTodos;
|
||||
}
|
||||
|
||||
export function clear(state: Store['todos']) {
|
||||
const newTodos = { ...state };
|
||||
|
||||
Object.keys(state.todos).forEach(key => {
|
||||
if (state.todos[key].completed) {
|
||||
delete newTodos[key];
|
||||
}
|
||||
});
|
||||
|
||||
return newTodos;
|
||||
}
|
||||
14
docs/step2-05/demo/src/store/index.ts
Normal file
14
docs/step2-05/demo/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