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. `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` 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:
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.
```ts ```ts
interface Store { interface Store {
@@ -59,12 +55,18 @@ interface Store {
// and probably some other properties // and probably some other properties
} }
interface FooProps { interface ComponentProps {
foo: string; 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 { return {
foo: state.foo foo: state.foo
}; };
@@ -73,17 +75,10 @@ function mapStateToProps(state: Store): Partial<FooProps> {
#### `mapDispatchToProps` #### `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. 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.
This function generally returns props which the component will use as callbacks in response to user actions.
```ts ```ts
interface FooProps { function mapDispatchToProps(dispatch: any): Partial<ComponentProps> {
foo: string;
addTodo: (label: string) => void;
}
function mapDispatchToProps(dispatch: any): Partial<FooProps> {
return { return {
// the dispatched message COULD be generated by an // the dispatched message COULD be generated by an
// action creator instead (see later steps) // action creator instead (see later steps)