Added chapters 12 and 13.

LearnRedux/Videos.md

@@ -6,7 +6,7 @@
 
 ## Video 3: Create Single and PhotoGrid components
 
-## Video 3: Setting up React Router
+## Video 4: Setting up React Router
 ```javascript
 import { Router, Route, IndexRoute, browserHistory } from 'react-router'
 
@@ -24,7 +24,7 @@ render(router, document.getElementById('root'))
 * Use `<Link to=''>Bla</Link>` to create push state links.
 * browserHistory will be replaced later by `history` which first syncs the browser history with the react store (see next video).
 
-## Video 4: Setting up React Store
+## Video 5: Setting up React Store
 * One giant state for all data
 * it is called `store`
 ```javascript
@@ -39,7 +39,7 @@ export const history = syncHistoryWithStore(browserHistory, store)
 export default store
 ```
 
-## Video 5: Redux Actions
+## Video 6: Redux Actions
 * actions invoke changes of the state (adding, updating, removing data)
 * actions are objects with two elements: type and payload
 * action creators are functions which return actions:
@@ -60,7 +60,7 @@ function addComment(postId, author, comment) {
 }
 ```
 
-## Video 6: Redux Reducers
+## Video 7: Redux Reducers
 * reducers handle the data when an action is received
 * use one reducer per components
 * reducers are functions which take
@@ -91,7 +91,7 @@ export default rootReducer
 * executes URL changes implicitely
 * <https://github.com/reactjs/react-router-redux>
 
-## Video 7: Integrating our Store with React Router
+## Video 8: Integrating our Store with React Router
 * to make the store globally available, put it on top of the routing
 * replace the browserHistory as mentioned before.
 ```diff
@@ -115,7 +115,7 @@ render(router, document.getElementById('root'))
 ```
 * The state is now stored in the store. `$r.store.getState()` 
 
-## Video 8: Understanding the Reducer's Job and Dispatching Actions
+## Video 9: Understanding the Reducer's Job and Dispatching Actions
 * action creators return actions
 * actions invoke state changes
 * reducers change the state
@@ -127,7 +127,7 @@ $r.store.dispatch({type: 'INCREMENT', index: 1})
 * The dispatcher sends the action to **every** reducer
 * Therefore, the reducer needs to have some conditional logic.
 
-## Video 9: Accessing dispatch and state with Redux
+## Video 10: Accessing dispatch and state with Redux
 * 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
@@ -154,8 +154,45 @@ export default App
 * because Main ist just JSX, connect injects standardized props into it and makes the state and dispatcher available.
 * You can still propagate data down with props
 
-## Video 10: Displaying Redux State inside our Components
+## Video 11: Displaying Redux State inside our Components
 * Creating React components
 
-## Video 11: Updating State with Reducers
+## 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!
+```javascript
+<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:
+```javascript
+function posts(state = [], action) {
+    switch(action.type) {
+        const i = action.index
+        case 'INCREMENT_LIKES' :
+            return [
+                ...state.slice(0, i),
+                { ...state[i], likes: state[i].likes + 1 },
+                ...state.slice(i + 1)
+            ]
+        default:
+            return state
+    }
+}
+```
+
+## 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
+```javascript
+render () {
+    const i = this.props.posts.findIndex((post) => post.code === this.props.params.postId)
+    const post = this.props.posts[i]
+    ...
+}
+```
+[1](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#Polyfill)
 
+## Video 14: Displaying and Adding Comments