From 76b061ae418437a74b6c1b481819d66ba2c41847 Mon Sep 17 00:00:00 2001 From: Andrew Artajos Date: Sun, 3 Mar 2019 11:59:26 +1100 Subject: [PATCH 1/4] fix: docment -> document --- step1-03/demo/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index 74eb6dd..efc5b24 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -111,14 +111,14 @@ window.onclick = function() { In our example we want to trigger a function based on the click of a button. To do this, we first need to get a reference to the button. We can use `querySelector` to get that reference. And then we can set its `onclick` value just like above. ```js -const button = docment.querySelector('.submit'); +const button = document.querySelector('.submit'); 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! From 65e1eccce17a0d26304edc11de6f2cc38150c6e8 Mon Sep 17 00:00:00 2001 From: Ken Date: Sun, 3 Mar 2019 19:33:59 -0800 Subject: [PATCH 2/4] minor updates with 2.5 --- step2-05/demo/README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) 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: From c2c5b99920f457ae4322102cfb4e036e713e50e4 Mon Sep 17 00:00:00 2001 From: Ken Date: Sun, 3 Mar 2019 19:52:27 -0800 Subject: [PATCH 3/4] exercise index should point to console and devtool --- step2-05/exercise/index.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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) +

+
From 74aeb5ad4b9efd52efb55050e6b24537bb1bbb3a Mon Sep 17 00:00:00 2001 From: Ken Date: Sun, 3 Mar 2019 20:14:51 -0800 Subject: [PATCH 4/4] fixing up step 2.7 demo --- assets/step.css | 7 ++++++- step2-06/demo/src/components/TodoHeader.tsx | 2 +- step2-06/demo/src/components/TodoListItem.tsx | 17 +++++++---------- .../exercise/src/components/TodoListItem.tsx | 17 +++++++---------- step2-07/demo/src/actions/index.ts | 2 +- step2-07/demo/src/components/TodoHeader.tsx | 2 +- step2-07/demo/src/components/TodoListItem.tsx | 19 ++++++++----------- step2-07/demo/src/index.tsx | 7 +++---- 8 files changed, 34 insertions(+), 39 deletions(-) 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/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 };