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

More step 7 updates

Browse Source
This commit is contained in:
Elizabeth Craig
2019-03-01 13:31:23 -08:00
parent 8e4b697ba8
commit 6c22b7fbd7
1 changed files with 12 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
step2-07/demo/README.md
View File

@@ -47,11 +47,7 @@ const NewComponent = connect(
`connect()` takes in a few functions that map portions of the state tree and dispatcher functions into props. It is a **higher-order function**, meaning that the return value of `connect()` is a function that decorates `OldComponent` into a `NewComponent` with all the mapped props.
#### `mapStateToProps`
A [`mapStateToProps`](https://react-redux.js.org/api/connect#mapstatetoprops-state-ownprops-object) function returns portions of the state tree that will be passed to the component as props.
Under the hood, this function helps inform the connected view when it should re-render based on a shallow comparison with the previous state.
Next we'll learn about how to write `mapStateToProps` and `mapDispatchToProps`. For demonstration purposes, we'll assume the store and the component props look like this:
```ts
interface Store {
@@ -59,12 +55,18 @@ interface Store {
// and probably some other properties
}
interface FooProps {
interface ComponentProps {
foo: string;
bar: string;
addTodo: (label: string) => void;
}
```
function mapStateToProps(state: Store): Partial<FooProps> {
#### `mapStateToProps`
A [`mapStateToProps`](https://react-redux.js.org/api/connect#mapstatetoprops-state-ownprops-object) function uses the state tree as a parameter and selects portions of it that will be passed to the component as part of `props`. When values in the state tree change, the `mapStateToProps` function is called, and the new props are passed to the component (causing React to re-render it).
```ts
function mapStateToProps(state: Store): Partial<ComponentProps> {
return {
foo: state.foo
};
@@ -73,17 +75,10 @@ function mapStateToProps(state: Store): Partial<FooProps> {
#### `mapDispatchToProps`
A [`mapDispatchToProps`](https://react-redux.js.org/api/connect#mapdispatchtoprops-object-dispatch-ownprops-object) function generates props which are used to dispatch Redux actions.
This function generally returns props which the component will use as callbacks in response to user actions.
A [`mapDispatchToProps`](https://react-redux.js.org/api/connect#mapdispatchtoprops-object-dispatch-ownprops-object) function generates props which are used to dispatch Redux actions. This function generally returns props which the component will use as callbacks in response to user actions.
```ts
interface FooProps {
foo: string;
addTodo: (label: string) => void;
}
function mapDispatchToProps(dispatch: any): Partial<FooProps> {
function mapDispatchToProps(dispatch: any): Partial<ComponentProps> {
return {
// the dispatched message COULD be generated by an
// action creator instead (see later steps)