diff --git a/assets/step.css b/assets/step.css index cd23ac3..db9feca 100644 --- a/assets/step.css +++ b/assets/step.css @@ -7,6 +7,11 @@ body { padding: 0; } +body.ms-Fabric { + font-size: 14px; + line-height: 20px; +} + #app { flex: 1 1 40%; padding: 50px; @@ -41,7 +46,7 @@ body { } #markdownReadme code { - font-family: Consolas,Menlo,Monaco,monospace; + font-family: Consolas, Menlo, Monaco, monospace; font-size: 0.9em; background-color: white; padding: 0.2em 0.4em; diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index e8475b2..fd3feef 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -119,7 +119,7 @@ button.onclick = displayMatches(); You can also combine these together like this: ```js -docment.querySelector('.submit').onclick = displayMatches; +document.querySelector('.submit').onclick = displayMatches; ``` Wire this up and see you function in action! diff --git a/step2-05/demo/README.md b/step2-05/demo/README.md index bbf0501..7757fb7 100644 --- a/step2-05/demo/README.md +++ b/step2-05/demo/README.md @@ -35,11 +35,11 @@ A view is a React component that consumes the store as its data. The [store](https://redux.js.org/basics/store) consists of a **state tree**, a **dispatcher**, and **reducers**. -1. The **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_ nested json data. It is updated from one snapshot to another through `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. This is the only way to update the state tree. ## Why Use Redux? @@ -52,17 +52,15 @@ There are lots of alternatives available, but here are some really good reasons # Creating the Redux store -The [`createStore()`](https://redux.js.org/api/createstore) function is provided by Redux and can take in several arguments. The simplest form just takes in reducers. +The [`createStore()`](https://redux.js.org/api/createstore) function is provided by Redux to create a store. In general, an application would just have one single store. It takes in the reducer and an initial snapshot of the state tree. ```ts const store = createStore(reducer, initialState); ``` -`createStore()` creates a store with a reducer, and some initial state. - # Writing Reducers -We will write our reducers with the help of some utilities from `redux-starter-kit`. Here is how we will write our reducers: +We will write our reducers with the help of some utilities from the official `redux-starter-kit`. Here is how we will write our reducers: ## 1. Organize reducers according to the keys of the state tree object: diff --git a/step2-05/exercise/index.html b/step2-05/exercise/index.html index ee7d10d..db5b42d 100644 --- a/step2-05/exercise/index.html +++ b/step2-05/exercise/index.html @@ -5,7 +5,18 @@
-
+
+

+ Nothing to show here; just look at your console window for output. Hit F12 (cmd+option+I on Mac) to open console + window. +

+ +

+ To inspect Redux store, use the Redux Dev Tool extension for your browser: + Chrome, + FireFox. (Sorry, no Edge or IE support) +

+
diff --git a/step2-06/demo/src/components/TodoHeader.tsx b/step2-06/demo/src/components/TodoHeader.tsx index c0cc75e..33bc31a 100644 --- a/step2-06/demo/src/components/TodoHeader.tsx +++ b/step2-06/demo/src/components/TodoHeader.tsx @@ -68,7 +68,7 @@ class TodoHeader extends React.Component { } const ConnectedTodoHeader = connect( - state => {}, + state => ({}), dispatch => ({ addTodo: label => dispatch(actions.addTodo(label)), setFilter: filter => dispatch(actions.setFilter(filter)) diff --git a/step2-06/demo/src/components/TodoListItem.tsx b/step2-06/demo/src/components/TodoListItem.tsx index 2ac0ec7..b338ed9 100644 --- a/step2-06/demo/src/components/TodoListItem.tsx +++ b/step2-06/demo/src/components/TodoListItem.tsx @@ -24,9 +24,7 @@ class TodoListItem extends React.Component } render() { - const { id } = this.props; - const { todos } = this.context.getState(); - const dispatch = this.context.dispatch; + const { id, todos, complete, remove } = this.props; const item = todos[id]; @@ -34,10 +32,10 @@ class TodoListItem extends React.Component {!this.state.editing && ( <> - dispatch(actions.complete(id))} /> + complete(id)} />
- dispatch(actions.remove(id))} /> + remove(id)} />
)} @@ -57,8 +55,7 @@ class TodoListItem extends React.Component } private onEdit = () => { - const { id } = this.props; - const { todos } = this.context.getState(); + const { id, todos } = this.props; const { label } = todos[id]; this.setState({ @@ -83,9 +80,9 @@ class TodoListItem extends React.Component const ConnectedTodoListItem = connect( (state: Store) => ({ todos: state.todos }), dispatch => ({ - complete: label => dispatch(actions.addTodo(label)), - remove: label => dispatch(actions.addTodo(label)), - edit: filter => dispatch(actions.setFilter(filter)) + complete: id => dispatch(actions.complete(id)), + remove: id => dispatch(actions.remove(id)), + edit: (id, label) => dispatch(actions.edit(id, label)) }) )(TodoListItem); diff --git a/step2-06/exercise/src/components/TodoListItem.tsx b/step2-06/exercise/src/components/TodoListItem.tsx index 2ac0ec7..b338ed9 100644 --- a/step2-06/exercise/src/components/TodoListItem.tsx +++ b/step2-06/exercise/src/components/TodoListItem.tsx @@ -24,9 +24,7 @@ class TodoListItem extends React.Component } render() { - const { id } = this.props; - const { todos } = this.context.getState(); - const dispatch = this.context.dispatch; + const { id, todos, complete, remove } = this.props; const item = todos[id]; @@ -34,10 +32,10 @@ class TodoListItem extends React.Component {!this.state.editing && ( <> - dispatch(actions.complete(id))} /> + complete(id)} />
- dispatch(actions.remove(id))} /> + remove(id)} />
)} @@ -57,8 +55,7 @@ class TodoListItem extends React.Component } private onEdit = () => { - const { id } = this.props; - const { todos } = this.context.getState(); + const { id, todos } = this.props; const { label } = todos[id]; this.setState({ @@ -83,9 +80,9 @@ class TodoListItem extends React.Component const ConnectedTodoListItem = connect( (state: Store) => ({ todos: state.todos }), dispatch => ({ - complete: label => dispatch(actions.addTodo(label)), - remove: label => dispatch(actions.addTodo(label)), - edit: filter => dispatch(actions.setFilter(filter)) + complete: id => dispatch(actions.complete(id)), + remove: id => dispatch(actions.remove(id)), + edit: (id, label) => dispatch(actions.edit(id, label)) }) )(TodoListItem); diff --git a/step2-07/demo/src/actions/index.ts b/step2-07/demo/src/actions/index.ts index c88015d..9e2a8c7 100644 --- a/step2-07/demo/src/actions/index.ts +++ b/step2-07/demo/src/actions/index.ts @@ -44,7 +44,7 @@ export const actionsWithService = { edit: (id: string, label: string) => { return async (dispatch: any, getState: () => Store) => { - dispatch(actions.complete(id)); + dispatch(actions.edit(id, label)); await service.update(id, getState().todos[id]); }; } diff --git a/step2-07/demo/src/components/TodoHeader.tsx b/step2-07/demo/src/components/TodoHeader.tsx index 997b4db..f4add99 100644 --- a/step2-07/demo/src/components/TodoHeader.tsx +++ b/step2-07/demo/src/components/TodoHeader.tsx @@ -68,7 +68,7 @@ class TodoHeader extends React.Component { } const ConnectedTodoHeader = connect( - state => {}, + state => ({}), (dispatch: any) => ({ addTodo: label => dispatch(actionsWithService.addTodo(label)), setFilter: filter => dispatch(actions.setFilter(filter)) diff --git a/step2-07/demo/src/components/TodoListItem.tsx b/step2-07/demo/src/components/TodoListItem.tsx index 947feaa..6b8b674 100644 --- a/step2-07/demo/src/components/TodoListItem.tsx +++ b/step2-07/demo/src/components/TodoListItem.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react'; -import { actions, actionsWithService } from '../actions'; +import { actionsWithService } from '../actions'; import { Store } from '../store'; import { connect } from 'react-redux'; @@ -24,9 +24,7 @@ class TodoListItem extends React.Component } render() { - const { id } = this.props; - const { todos } = this.context.getState(); - const dispatch = this.context.dispatch; + const { id, todos, complete, remove } = this.props; const item = todos[id]; @@ -34,10 +32,10 @@ class TodoListItem extends React.Component {!this.state.editing && ( <> - dispatch(actions.complete(id))} /> + complete(id)} />
- dispatch(actions.remove(id))} /> + remove(id)} />
)} @@ -57,8 +55,7 @@ class TodoListItem extends React.Component } private onEdit = () => { - const { id } = this.props; - const { todos } = this.context.getState(); + const { id, todos } = this.props; const { label } = todos[id]; this.setState({ @@ -83,9 +80,9 @@ class TodoListItem extends React.Component const ConnectedTodoListItem = connect( (state: Store) => ({ todos: state.todos }), (dispatch: any) => ({ - complete: label => dispatch(actionsWithService.addTodo(label)), - remove: label => dispatch(actionsWithService.addTodo(label)), - edit: filter => dispatch(actions.setFilter(filter)) + complete: id => dispatch(actionsWithService.complete(id)), + remove: id => dispatch(actionsWithService.remove(id)), + edit: (id, label) => dispatch(actionsWithService.edit(id, label)) }) )(TodoListItem); diff --git a/step2-07/demo/src/index.tsx b/step2-07/demo/src/index.tsx index 4cc9e8c..4ddbf60 100644 --- a/step2-07/demo/src/index.tsx +++ b/step2-07/demo/src/index.tsx @@ -7,13 +7,12 @@ import { Provider } from 'react-redux'; import { initializeIcons } from '@uifabric/icons'; import { composeWithDevTools } from 'redux-devtools-extension'; import thunk from 'redux-thunk'; -import { FilterTypes } from './store'; +import * as service from './service'; +import { Store, FilterTypes } from './store'; (async () => { - // TODO: to make the store pre-populate with data from the service, - // replace the todos value below with a call to "await service.getAll()" const preloadStore = { - todos: {}, + todos: (await service.getAll()) as Store['todos'], filter: 'all' as FilterTypes };