|
@@ -128,6 +128,7 @@ export default rootReducer
|
|
|
* actions invoke state changes
|
|
|
* reducers change the state
|
|
|
* the store provides a dispatch function
|
|
|
+
|
|
|
```jsx
|
|
|
// on the console
|
|
|
$r.store.dispatch({type: 'INCREMENT', index: 1})
|
|
@@ -139,6 +140,7 @@ export default rootReducer
|
|
|
* in regular React, the state or parts of it are propagated via props
|
|
|
* in Redux, `connect` injects the data in the components that need it
|
|
|
* for that, we wrap the main component with one that has the state and dispatcher propagated
|
|
|
+
|
|
|
```jsx
|
|
|
import { bindActionCreators } from 'redux'
|
|
|
import { connect } from 'react-redux'
|
|
@@ -168,14 +170,16 @@ export default rootReducer
|
|
|
## Video 12: Updating State with Reducers
|
|
|
* Once you propagate the reducer function to the component, this is how you pass arguments to the function call
|
|
|
- Remember that `<button onClick={this.props.function(argument)} ...>` would call the function at document load!
|
|
|
- ```jsx
|
|
|
+
|
|
|
+ ```html
|
|
|
<button onClick={this.props.function.bind(null, argument)} ...>
|
|
|
```
|
|
|
-
|
|
|
+
|
|
|
* Use pure functions to manipulate state. So the same inputs (previous state, action) always gives the same output (next state).
|
|
|
- Makes testing easier.
|
|
|
- Enables Redux dev tools, time travel etc.
|
|
|
* Do the same as in React state handling: Copy, modify, return copy:
|
|
|
+
|
|
|
```jsx
|
|
|
function posts(state = [], action) {
|
|
|
switch(action.type) {
|
|
@@ -195,6 +199,7 @@ export default rootReducer
|
|
|
## Video 13: Displaying the Single Photo Component
|
|
|
* Polyfills are new ES6 functions cross compiled for old browsers through Babel. [Example for findIndex()][1]
|
|
|
* You can use `findIndex()` to get a certain element of an array
|
|
|
+
|
|
|
```jsx
|
|
|
render () {
|
|
|
const { postId } = this.props.params
|