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 a bit of details to step2-07

Browse Source
This commit is contained in:
Ken
2019-02-22 19:26:42 -08:00
parent 5a6a5aa359
commit 7fe50e7366
4 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
step2-05/demo/src/index.tsx
View File

@@ -1,9 +1,6 @@
import { reducer } from './reducers';
import { createStore, compose } from 'redux';
import { createStore } from 'redux';
declare var window: any;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, {}, composeEnhancers());
const store = createStore(reducer);
console.log(store.getState());

7
step2-05/exercise/src/index.tsx
View File

@@ -1,9 +1,6 @@
import { reducer } from './reducers';
import { createStore, compose } from 'redux';
import { createStore } from 'redux';
declare var window: any;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, {}, composeEnhancers());
const store = createStore(reducer);
console.log(store.getState());

5
step2-06/README.md
View File

@@ -4,7 +4,10 @@ Redux: Dispatching Actions and Examining State.
In this step, we learn about `dispatch` and `getState()`. Dispatching action messages to the store is the only means by which to inform the reducers to modify the shared state tree.
We also saw how we may compose the reducers according to the shape
We also see how we may compose the reducers according to the shape.
If you want a really neat UI to show what the store looks when actions are dispatched to the store, use this Chrome extension:
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
# Exercise

8
step2-07/README.md
View File

@@ -2,6 +2,14 @@
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