microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding step 2.4 and 2.5 exercises

Browse Source
This commit is contained in:
Ken
2019-03-02 22:56:59 -08:00
parent f459ad5823
commit 8446b010c9
13 changed files with 440 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
step2-05/exercise/README.md
View File

@@ -6,8 +6,12 @@ If you still have the app running from a previous step, stop it with `ctrl+c`. S
1. First, take a look at the store interface in `exercise/src/store/index.ts`. Note that the `Store` interface has two keys: `todos` and `filter`. We'll concentrate on `todos`, which is an object where the keys are string IDs and the values are of a `TodoItem` type.
2. Open `exercise/src/reducers/pureFunctions.ts` and fill in the missing function bodies.
2. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`.
3. Open `exercise/src/reducers/index.ts` and fill in the missing case statements for the switch on `action.type`.
3. Open `exercise/src/index.tsx` and write separate dispatch calls.
4. Open `exercise/src/reducers/pureFunctions.spec.ts` and implement tests for the functions you wrote for `remove`, `complete`, and `clear`.
4. Take a look what is written in the console (F12 on PC, cmd-option-I on Mac).
5. Install the [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) extensions
6. Observe the state changes, try doing "time travel"

8
step2-05/exercise/src/index.tsx
View File

@@ -5,11 +5,7 @@ import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, {}, composeWithDevTools());
store.dispatch(actions.addTodo('hello'));
let action = actions.addTodo('world');
store.dispatch(action);
store.dispatch(actions.remove(action.id));
// TODO: try doing some store.dispatch() calls here
// HINT: remember to use the functions inside "actions" object
console.log(store.getState());

12
step2-05/exercise/src/reducers/index.ts
View File

@@ -6,7 +6,7 @@ export const todosReducer = createReducer<Store['todos']>(
{},
{
addTodo(state, action) {
state[action.id] = { label: action.label, completed: false };
// TODO: implement this reducer
},
remove(state, action) {
@@ -14,10 +14,6 @@ export const todosReducer = createReducer<Store['todos']>(
},
clear(state, action) {
state[action.id].completed = !state[action.id].completed;
},
complete(state, action) {
Object.keys(state).forEach(key => {
if (state[key].completed) {
delete state[key];
@@ -25,8 +21,12 @@ export const todosReducer = createReducer<Store['todos']>(
});
},
complete(state, action) {
// TODO: implement this reducer
},
edit(state, action) {
state[action.id].label = action.label;
// TODO: implement this reducer
}
}
);