|
@@ -1,3 +1,7 @@
|
|
|
|
+# Learn Redux
|
|
|
|
+* <https://learnredux.com/account>
|
|
|
|
+* <http://redux.js.org/docs/introduction/>
|
|
|
|
+
|
|
## Video 1: Setting up Webpack
|
|
## Video 1: Setting up Webpack
|
|
* React Dev Tools
|
|
* React Dev Tools
|
|
* Redux 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
|
|
[Example for findIndex()]: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#Polyfill
|
|
|
|
|
|
## Video 14: Displaying and Adding Comments
|
|
## 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
|