Sfoglia il codice sorgente

Added chapters 15 and 16.

Tomi Cvetic 8 anni fa
parent
commit
8060856e46
1 ha cambiato i file con 60 aggiunte e 0 eliminazioni
  1. 60 0
      LearnRedux/Videos.md

+ 60 - 0
LearnRedux/Videos.md

@@ -1,3 +1,7 @@
+# Learn Redux
+* <https://learnredux.com/account>
+* <http://redux.js.org/docs/introduction/>
+
 ## Video 1: Setting up Webpack
 * React Dev Tools
 * Redux Dev Tools
@@ -212,3 +216,59 @@ export default rootReducer
 [Example for findIndex()]: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#Polyfill
 
 ## Video 14: Displaying and Adding Comments
+* You can hide a submit button, if it's clear that the Return key submits the form.
+* consider separate render functions for looped-over elements to keep the functions clearer.
+
+## Video 15: Updating Comment State in our Store
+* Write a functions, which handles the submit of a form
+
+```jsx
+...
+handleSubmit(e) {
+    e.preventDefault()
+    const { postId } = this.props.params
+    const author = this.refs.author.value
+    this.props.addComment(postId, author, ...)
+}
+render() {
+    ...
+    <form ref='commentForm' className='comment-form' onSubmit={this.handleSubmit}>
+        <input type='text' ref='author' placeholder='author'/>
+    ...
+}
+```
+
+## Video 16: Redux Reducer Composition
+* Just like you can split up your state in different pieces, you can also split up the reducers. This is called reducer composition
+* Example for comments:
+    - write one function to handle all comments
+    - write other functions to only handle one comment at a time
+    
+    ```jsx
+    function postComments(state = [], action) {
+        switch (action.type) {
+            case 'ADD_COMMENT':
+                return [
+                    ...state, {
+                        user: action.author,
+                        text: action.comment,
+                    }
+                ]
+            default:
+                return state
+        }
+    }
+    function comments(state = [], action) {
+        if (typeof action.postId !== 'undefined') {
+            return {
+                ...state,
+                [action.postId]: postComments(state[action.postId], action)
+            }
+        }
+        return state
+    }
+
+    export default comment
+    ```
+
+## Video 18: Hot Reloading Redux Reducers with Webpack