Skip to content

Commit efe3ef6

Browse files
committed
some more corrections
1 parent de82284 commit efe3ef6

File tree

2 files changed

+9
-4
lines changed

2 files changed

+9
-4
lines changed

README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ The idea is to help new and existing Redux users to understand how the general m
1010

1111
## Article
1212

13-
This repo furthermore holds an [article](/article/react-redux-concept-workflow_v105.md) that walks you though an extended version of this cheatsheet. It has been extended by two very common libraries: 'react-router' and 'immutable'.
13+
This repo furthermore holds an [article](/article/react-redux-concept-workflow_v105.md) that walks you though an extended version of this cheatsheet. Two very common libraries have been added to the extended version: 'react-router' and 'immutable'.
14+
15+
The article runs through the Redux workflow starting at the dominant Redux player: the store.
16+
While going the full circle the article introduces the main Redux concepts and touches briefly on some external libraries such as: 'redux-persist', 'redux-thunk', 'redux-saga', 'redux-promise', 'reselect' and 'normalizr'.
17+
18+
Please, raise an issue in case you find errors or things to be not clear enough.
1419

1520

1621
## Notes

article/react-redux-concept-workflow_v105.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ I'd like to start with a graphical cheat sheet explaining the workflow in a Reac
148148
}
149149
```
150150
151-
Just as a side note, since this is the first time we are showing class methods: remember, that there are two types of notations for method declarations with a different effect to [*autobinding*](https://facebook.github.io/react/docs/react-without-es6.html#autobinding) the methods to the *this* operator of the classes. Here, you would need to bind manageSomeDate() and applySomeBusinessLogic() manually to the *this* operator, whereas makeSomeCalculations() would have been autobound.
151+
Just as a side note, since this is the first time we are showing class methods: remember, that there are two types of notations for method declarations with a different effect to [*autobinding*](https://facebook.github.io/react/docs/react-without-es6.html#autobinding) the methods to the *this* operator of the classes. Here, you would need to bind manageSomeDate() and applySomeBusinessLogic() manually to the *this* operator, whereas *makeSomeCalculations()* would have been autobound.
152152
153153
154154
1. Since only smart container components manage data only they need to receive state data from the store. This works via a function called [*connect()*](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) which you need to import from 'react-redux'. The *connect()* function returns a higher order component, i.e. a component that expects a component as an argument. This argument is the smart component that you want to connect. The higher order component then returns a new instance of the smart component that is now connected.
@@ -183,15 +183,15 @@ I'd like to start with a graphical cheat sheet explaining the workflow in a Reac
183183
184184
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.
185185
186-
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).
186+
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).
187187
188188
```JavaScript
189189
function mapStateToProps(state) {
190190
return {
191191
// component gets this.props.selection1
192192
selection1: selector1(state.slice01),
193193
// component gets this.props.selection2
194-
selection2: selector2(state.slice01)
194+
selection2: selector2(state.slice01)
195195
}
196196
}
197197
```

0 commit comments

Comments
 (0)