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

Step 7 and styling updates

Browse Source
This commit is contained in:
Elizabeth Craig
2019-03-01 07:48:27 -08:00
parent 0e24c8ca9c
commit ed66d75d34
4 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
step2-07/exercise/README.md
View File

@@ -1,21 +1,21 @@
# Step 2.7: Connect Redux Store to View (Exercise)
# Step 2.7: Connect Redux store to view (Exercise)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
If you still have `npm test` running from the last step, stop it using `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 7 to see results.
1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
1. Open `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`
2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
3. Remove the `export` from `export const TodoFooter = (props: TodoFooterProps) => {`
4. 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. Uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
5. do steps 2, 3, and 4 for the `TodoHeader.tsx` file
5. Repeat steps 2, 3, and 4 for the `TodoHeader.tsx` file
## Bonus Exercise
## Bonus exercise
For further reading, go here to look up more information about the `mergeProps` and `options` parameters to `connect()`:
For further reading, go here to learn more about the `mergeProps` and `options` parameters to `connect()`:
https://react-redux.js.org/api/connect