mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
added demo code to step 5
This commit is contained in:
Ken
@@ -26,17 +26,17 @@ A view is a React component that consumes the store as its data.
|
||||
|
||||
### Action
|
||||
|
||||
[Actions](https://redux.js.org/basics/actions) are messages that represent some event, such as a user's action or a network request. With the aid of _reducers_, they affect the overall state.
|
||||
[Actions](https://redux.js.org/basics/actions) are serializable JSON messages that represent some event, such as a user's action or a network request. With the aid of _reducers_, they affect the overall state. At the minimum, it should contain a `type` key. Sometimes it contains additional data as a _payload_.
|
||||
|
||||
### Store
|
||||
|
||||
The [store](https://redux.js.org/basics/store) consists of a **state tree**, a **dispatcher**, and **reducers**.
|
||||
|
||||
1. A state tree is a **singleton**, **serializable**, **immutable** json data. It is updated from one snapshot to another through `reducers`.
|
||||
1. The **state tree** is a _singleton_, _serializable_, _immutable_ json data. It is updated from one snapshot to another through `reducers`.
|
||||
|
||||
2. A dispatcher accepts actions passing them to the reducers.
|
||||
2. The **dispatcher** accepts actions passing them to the reducers.
|
||||
|
||||
3. Reducers are functions that take in the current state tree and an action, producing the next snapshot of the state tree.
|
||||
3. **Reducers** are functions that take in the current state tree and an action, producing the next snapshot of the state tree.
|
||||
|
||||
# Creating the Redux store
|
||||
|
||||
|
||||
@@ -6,10 +6,18 @@
|
||||
<body class="ms-Fabric">
|
||||
<div id="markdownReadme" data-src="./README.md"></div>
|
||||
<div id="app">
|
||||
For this step, we look at unit testing. Run
|
||||
<pre>npm test</pre>
|
||||
in the command line.
|
||||
<p>
|
||||
Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open console
|
||||
window.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To inspect Redux store, use the <a href="http://extension.remotedev.io/">Redux Dev Tool</a> extension for your browser:
|
||||
<a href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd">Chrome</a>,
|
||||
<a href="https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/">FireFox</a>. (Sorry, no Edge or IE support)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script src="../../assets/scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
9
step2-05/demo/src/actions/index.ts
Normal file
9
step2-05/demo/src/actions/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import nextId from 'uuid/v4';
|
||||
|
||||
export const actions = {
|
||||
addTodo: (label: string) => ({ type: 'addTodo', id: nextId(), label }),
|
||||
remove: (id: string) => ({ type: 'remove', id }),
|
||||
complete: (id: string) => ({ type: 'complete', id }),
|
||||
clear: () => ({ type: 'clear' }),
|
||||
setFilter: (filter: string) => ({ type: 'setFilter', filter })
|
||||
};
|
||||
@@ -1,6 +1,15 @@
|
||||
import { reducer } from './reducers';
|
||||
import { createStore } from 'redux';
|
||||
import { actions } from './actions';
|
||||
import { composeWithDevTools } from 'redux-devtools-extension';
|
||||
|
||||
const store = createStore(reducer);
|
||||
const store = createStore(reducer, {}, composeWithDevTools());
|
||||
|
||||
store.dispatch(actions.addTodo('hello'));
|
||||
|
||||
let action = actions.addTodo('world');
|
||||
store.dispatch(action);
|
||||
|
||||
store.dispatch(actions.remove(action.id));
|
||||
|
||||
console.log(store.getState());
|
||||
|
||||
@@ -1,20 +1,43 @@
|
||||
import { Store } from '../store';
|
||||
import { addTodo, remove, complete, clear } from './pureFunctions';
|
||||
import { combineReducers } from 'redux';
|
||||
import { createReducer } from 'redux-starter-kit';
|
||||
|
||||
export function reducer(state: Store['todos'], payload: any): Store['todos'] {
|
||||
switch (payload.type) {
|
||||
case 'addTodo':
|
||||
return addTodo(state, payload.id, payload.label);
|
||||
export const todosReducer = createReducer<Store['todos']>(
|
||||
{},
|
||||
{
|
||||
addTodo(state, action) {
|
||||
state[action.id] = { label: action.label, completed: false };
|
||||
},
|
||||
|
||||
case 'remove':
|
||||
return remove(state, payload.id);
|
||||
remove(state, action) {
|
||||
delete state[action.id];
|
||||
},
|
||||
|
||||
case 'complete':
|
||||
return complete(state, payload.id);
|
||||
clear(state, action) {
|
||||
state[action.id].completed = !state[action.id].completed;
|
||||
},
|
||||
|
||||
case 'clear':
|
||||
return clear(state);
|
||||
complete(state, action) {
|
||||
Object.keys(state).forEach(key => {
|
||||
if (state[key].completed) {
|
||||
delete state[key];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
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 const reducer = combineReducers({
|
||||
todos: todosReducer,
|
||||
filter: filterReducer
|
||||
});
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
import { Store } 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) {
|
||||
// Clone the Todos
|
||||
const newTodos = { ...state };
|
||||
|
||||
// Delete an item in the object by the key
|
||||
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']) {
|
||||
// Clone the todos
|
||||
const newTodos = { ...state };
|
||||
|
||||
// Delete all todos based on the completed flag, looping over the keys of the todos
|
||||
Object.keys(state).forEach(key => {
|
||||
if (state[key].completed) {
|
||||
delete newTodos[key];
|
||||
}
|
||||
});
|
||||
|
||||
return newTodos;
|
||||
}
|
||||
@@ -5,11 +5,7 @@
|
||||
</head>
|
||||
<body class="ms-Fabric">
|
||||
<div id="markdownReadme" class="exercise" data-src="./README.md"></div>
|
||||
<div id="app">
|
||||
For this step, we look at unit testing. Run
|
||||
<pre>npm test</pre>
|
||||
in the command line.
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<script src="../../assets/scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
9
step2-05/exercise/src/actions/index.ts
Normal file
9
step2-05/exercise/src/actions/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import nextId from 'uuid/v4';
|
||||
|
||||
export const actions = {
|
||||
addTodo: (label: string) => ({ type: 'addTodo', id: nextId(), label }),
|
||||
remove: (id: string) => ({ type: 'remove', id }),
|
||||
complete: (id: string) => ({ type: 'complete', id }),
|
||||
clear: () => ({ type: 'clear' }),
|
||||
setFilter: (filter: string) => ({ type: 'setFilter', filter })
|
||||
};
|
||||
@@ -1,6 +1,15 @@
|
||||
import { reducer } from './reducers';
|
||||
import { createStore } from 'redux';
|
||||
import { actions } from './actions';
|
||||
import { composeWithDevTools } from 'redux-devtools-extension';
|
||||
|
||||
const store = createStore(reducer);
|
||||
const store = createStore(reducer, {}, composeWithDevTools());
|
||||
|
||||
store.dispatch(actions.addTodo('hello'));
|
||||
|
||||
let action = actions.addTodo('world');
|
||||
store.dispatch(action);
|
||||
|
||||
store.dispatch(actions.remove(action.id));
|
||||
|
||||
console.log(store.getState());
|
||||
|
||||
@@ -1,16 +1,43 @@
|
||||
import { Store } from '../store';
|
||||
import { addTodo, remove, complete } from './pureFunctions';
|
||||
import { combineReducers } from 'redux';
|
||||
import { createReducer } from 'redux-starter-kit';
|
||||
|
||||
export function reducer(state: Store['todos'], payload: any): Store['todos'] {
|
||||
switch (payload.type) {
|
||||
case 'addTodo':
|
||||
return addTodo(state, payload.id, payload.label);
|
||||
export const todosReducer = createReducer<Store['todos']>(
|
||||
{},
|
||||
{
|
||||
addTodo(state, action) {
|
||||
state[action.id] = { label: action.label, completed: false };
|
||||
},
|
||||
|
||||
// Fill in the blanks here for:
|
||||
// - remove
|
||||
// - complete
|
||||
// - clear
|
||||
remove(state, action) {
|
||||
delete state[action.id];
|
||||
},
|
||||
|
||||
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];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
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 const reducer = combineReducers({
|
||||
todos: todosReducer,
|
||||
filter: filterReducer
|
||||
});
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
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);
|
||||
|
||||
// make sure that adding an item would not result in the same instance of state
|
||||
// TODO: uncomment the below to get started
|
||||
/*
|
||||
|
||||
expect(newState).not.toBe(state);
|
||||
|
||||
expect(keys.length).toBe(1);
|
||||
expect(newState[keys[0]].label).toBe('item1');
|
||||
expect(newState[keys[0]].completed).toBeFalsy();
|
||||
*/
|
||||
});
|
||||
|
||||
// TODO: add a test for remove()
|
||||
});
|
||||
@@ -1,39 +0,0 @@
|
||||
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) {
|
||||
// Clone the todo, overriding
|
||||
const newTodo = { ...state[id], completed: !state[id].completed };
|
||||
return { ...state, [id]: newTodo };
|
||||
}
|
||||
|
||||
export function clear(state: Store['todos']) {
|
||||
// Clone the todos
|
||||
const newTodos = { ...state };
|
||||
|
||||
// Delete all todos based on the completed flag, looping over the keys of the todos
|
||||
Object.keys(state).forEach(key => {
|
||||
if (state[key].completed) {
|
||||
delete newTodos[key];
|
||||
}
|
||||
});
|
||||
|
||||
return newTodos;
|
||||
}
|
||||
Reference in New Issue
Block a user