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

fixing up react-redux for all demo examples

Browse Source
This commit is contained in:
Ken
2019-03-03 09:49:43 -08:00
parent 27bf77b34f
commit 21a61f2450
15 changed files with 179 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
step2-06/exercise/README.md
View File

@@ -2,16 +2,20 @@
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
## Bind Redux Store with Class Component
If you haven't arStart the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 6 to see results.
1. Open `exercise/src/components/TodoHeader.tsx`.
At the beginning of this exercise, the "Add" and "Clear Completed" buttons do not work. We'll be fixing that in this step!
2. Just like the 2.4 exercise, implement `onAdd` and `onFilter` using `this.context.dispatch()` calls to dispatch actions.
1. Open `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
## Bind Redux Store with Functional Component
2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
1. Open `exercise/src/components/TodoFooter.tsx`.
3. Uncomment the bottom bits of code and fill in `connect()` arguments - feel free to use `TodoListItem.tsx` as a guide
2. Follow the instructions in the file to replace the `todos` const using the `useMappedState()` hook.
4. Repeat steps 2, 3 for the `TodoHeader.tsx` file
3. Retrieve the dispatch function with `useDispatch()` hook.
## Bonus exercise
For further reading, go here to learn more about the `mergeProps` and `options` parameters to `connect()`:
https://react-redux.js.org/api/connect