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

23
docs/step2-07/README.md Normal file
View File

@@ -0,0 +1,23 @@
# Step 2.7
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `<Provider>` component.
```ts
const NewComponent = function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(OldComponent);
```
The `connect()` function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a **higher order function** meaning that the return value of `connect()` is a function that decorates OldComponents into a NewComponent with all the mapped props.
This `mapStateToProps` function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state.
# Exercise
1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
3. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
4. do steps 2 and 3 for the `TodoHeader.tsx` file

8
docs/step2-07/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-07/demo/step2-07/demo.js"></script></body>
<script src="../../step2-07/demo/step2-07/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
</html>

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

File diff suppressed because one or more lines are too long

8
docs/step2-07/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-07/exercise/step2-07/exercise.js"></script></body>
<script src="../../step2-07/exercise/step2-07/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
</html>

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

File diff suppressed because one or more lines are too long