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

little tweaks, and splitting step 2-6 readme

Browse Source
This commit is contained in:
Ken
2019-02-28 22:34:32 -08:00
parent 9465f2dba4
commit 0e24c8ca9c
12 changed files with 27 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
step2-06/README.md → step2-06/demo/README.md
View File

@@ -1,4 +1,4 @@
# Step 2.6 - Redux: Dispatching actions and examining state
# Step 2.6 - Redux: Dispatching actions and examining state (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -66,25 +66,3 @@ In general, you should only include serializable things in the state so that you
If you want a really neat UI to show what the store looks when actions are dispatched to the store, use the [Redux DevTools extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd).
This extension (available for Chrome and Firefox) is a work of genius! It lets you replay actions and step backwards to debug the current state of a Redux application. In a large enough application, this kind of debuggability is invaluable. It also helps developers who are not familiar with your application to quickly get a handle on how the state changes in response to some actions.
# Exercise
## Visualize state changes with Chrome extension
If you still have `npm test` running from the previous step, stop it with `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6.
1. Install the [Redux DevTools Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
2. Hit F12 (`cmd+option+I` on Mac) and open the inspector panel entitled **Redux**
3. Modify `exercise/src/index.tsx` to dispatch actions (you're not limited to adding todos; you can also remove and clear)
4. Explore the actions' effects using the extension
## Playing with dispatching actions inside tests
Stop the app using `ctrl+C` and start the tests by running `npm test`.
1. Open `exercise/src/reducers/reducer.spec.ts`
2. Follow the instructions to fill out the reducer tests

2
step2-06/demo/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<div id="markdownReadme" data-src="./README.md"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>

23
step2-06/exercise/README.md Normal file
View File

@@ -0,0 +1,23 @@
# Step 2.6 - Redux: Dispatching actions and examining state (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
## Visualize state changes with Chrome extension
If you still have `npm test` running from the previous step, stop it with `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6.
1. Install the [Redux DevTools Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
2. Hit F12 (`cmd+option+I` on Mac) and open the inspector panel entitled **Redux**
3. Modify `exercise/src/index.tsx` to dispatch actions (you're not limited to adding todos; you can also remove and clear)
4. Explore the actions' effects using the extension
## Playing with dispatching actions inside tests
Stop the app using `ctrl+C` and start the tests by running `npm test`.
1. Open `exercise/src/reducers/reducer.spec.ts`
2. Follow the instructions to fill out the reducer tests

2
step2-06/exercise/index.html
View File

@@ -4,7 +4,7 @@
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme"></div>
<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>