|
2 | 2 |
|
3 | 3 | Ulrich Anders
|
4 | 4 |
|
5 |
| -Version 1.0.6, March 2017 |
| 5 | +Version 1.0.7, March 2017 |
6 | 6 |
|
7 | 7 | ## Introduction
|
8 | 8 |
|
@@ -185,15 +185,15 @@ I'd like to start with a graphical cheat sheet explaining the workflow in a Reac
|
185 | 185 |
|
186 | 186 | 1. Whenever the state in the store is updated, all your *mapStateToProps()* mapping functions for connecting components will be called and the new state data mapped to the properties of the connected components.
|
187 | 187 |
|
188 |
| -1. If you only want to map a subset of your slice to certain properties in your component you can make a selection from the slice of your state tree. A function that makes a selection is called a *selector*. But remember each time the store gets an update all mapping functions are called independent of whether the state change is relevant for a component. That means that also all the selector functions are called. If a selector function now is computationally expensive, it might slow down your app. In this case you should optimize your selectors by help of ['reselect'](https://github.com/reactjs/reselect). |
| 188 | +1. If you only want to map a subset of your slice to certain properties in your component you can make a selection from the slice of your state tree. A function that makes a selection is called a *selector*. It is a convention to name selector functions with an initial *get...*. But remember each time the store gets an update all mapping functions are called independent of whether the state change is relevant for a component. That means that also all the selector functions are called. If a selector function now is computationally expensive, it might slow down your app. In this case you should optimize your selectors by help of ['reselect'](https://github.com/reactjs/reselect). |
189 | 189 |
|
190 | 190 | ```JavaScript
|
191 | 191 | function mapStateToProps(state) {
|
192 | 192 | return {
|
193 | 193 | // component gets this.props.selection1
|
194 |
| - selection1: selector1(state.slice01), |
| 194 | + selection1: getSelection1(state.slice01), |
195 | 195 | // component gets this.props.selection2
|
196 |
| - selection2: selector2(state.slice01) |
| 196 | + selection2: getSelection2(state.slice01) |
197 | 197 | }
|
198 | 198 | }
|
199 | 199 | ```
|
@@ -233,7 +233,7 @@ I'd like to start with a graphical cheat sheet explaining the workflow in a Reac
|
233 | 233 | mapDispatchToProps)(SmartComponent01)
|
234 | 234 | ```
|
235 | 235 |
|
236 |
| -1. Your component now has a *dispatch()* function. But what is the *dispatch()* function dispatching? A dispatcher normally dispatches a command to someone. Think of 911, where the dispatcher commands a police officer to undertake something. Or in a shop, where the dispatcher commands a good to be send to a customer. In Redux you need different commands, but they all relate to updating the state in the store. Each command therefore needs to contain two kinds of information. A type to represent the command and the data relevant for the state change. This command is called an [*action*](http://redux.js.org/docs/basics/Actions.html) in Redux. The name *action* may be confusing at first, since with this name one would rather expect a function than an object. However, with time you get used to it. The *action* is a plain JS object containing a type and ideally the minimal amount of *relevant* data required to perform the state change. |
| 236 | +1. Your component now has a *dispatch()* function. But what is the *dispatch()* function dispatching? A dispatcher normally dispatches a command to someone. Think of 911, where the dispatcher commands a police officer to undertake something. Or in a shop, where the dispatcher commands a good to be send to a customer. In Redux you need different commands, but they all relate to updating the state in the store. Each command therefore needs to contain two kinds of information. A type to represent the command and the data relevant for the state change. This command is called an [*action*](http://redux.js.org/docs/basics/Actions.html) in Redux. The name *action* may be confusing at first, since with this name one would rather expect a function than an object. However, with time you get used to it. The *action* is a plain JS object containing a type and ideally the minimal amount of *relevant* data required to perform the state change. |
237 | 237 |
|
238 | 238 |
|
239 | 239 | ```JavaScript
|
@@ -294,6 +294,8 @@ I'd like to start with a graphical cheat sheet explaining the workflow in a Reac
|
294 | 294 |
|
295 | 295 | 1. In this way, the store receives a new state. When the store is updated with a new state state a re-render of the components that have subscribed to the store is triggered.
|
296 | 296 |
|
| 297 | +1. Note, action creators are often used to create actions that lead to a change if the state in the store. But no all actions are used generate state changes. Some action objects may simply be generated by action creators to make temporary state changes to the app that are not stored. |
| 298 | +
|
297 | 299 | 1. An arbitrary number of functions can register at the store to be also triggered whenever the store got updated with a new state. The functions registered at the store to be triggered have been named listeners, probably because they are "listening" to updates of the state. But in fact, they are not actively listening themselves. Quite the opposite, they are not actively in control, they are just passively triggered. The triggering function is a method that belongs to the store named [*store.subscribe()*](http://redux.js.org/docs/api/Store.html#subscribe). This name also takes a little bit getting used to as the store itself actually does not subscribe to anything. So, mentally you could think *trigger* when you use *subscribe()*.^[Don't confuse a component actually *subscribing* to a state change by help of the *connect()* function with a function that can be registered with the *store.subscribe()* method in order to be triggered whenever there is a new state.]
|
298 | 300 |
|
299 | 301 | ```JavaScript
|
|
0 commit comments