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 documentation

Browse Source
This commit is contained in:
Ken
2019-02-23 07:56:29 -08:00
parent 672099ccdd
commit 221485a940
59 changed files with 3448 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/step2-09/README.md Normal file
View File

@@ -0,0 +1,21 @@
# Step 2.9
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Redux Thunk middleware for actions with service calls. The documentation is here:
https://github.com/reduxjs/redux-thunk
Action creators are a natural place to put service calls. Redux thunk middleware passes in the `dispatch()` and `getState()` from the store into the action creators. This allows the action creator itself to dispatch different actions in between async side effects. Combined with the async / await syntax, coding service calls is a cinch!
Most of the time, in a single-page app, we apply **optimistic UI updates**. We can update the UI before the network call completes so the UI feels more responsive.
# Exercise
1. open up `exercise/src/service/index.ts` and study the signature of the functions to call the service such as the `add()` function
2. open `exercise/src/actions/index.ts` and fill in the missing content inside `actionsWithService`
- note that the `complete` and `clear` functions require you to write your own wrapper function
3. open `exercise/src/index.tsx` and follow the instructions in the TODO comment to make the app prepopulate with data from the service.

8
docs/step2-09/demo/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div>
<script src="../../step2-09/demo/step2-09/demo.js"></script></body>
<script src="../../step2-09/demo/step2-09/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
</html>

2
docs/step2-09/demo/step2-09/demo.js
View File

File diff suppressed because one or more lines are too long

8
docs/step2-09/exercise/index.html
View File

@@ -1,6 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="app"></div>
<script src="../../step2-09/exercise/step2-09/exercise.js"></script></body>
<script src="../../step2-09/exercise/step2-09/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
</html>

2
docs/step2-09/exercise/step2-09/exercise.js
View File

File diff suppressed because one or more lines are too long