|
@@ -254,6 +254,11 @@ render() {
|
|
text: action.comment,
|
|
text: action.comment,
|
|
}
|
|
}
|
|
]
|
|
]
|
|
|
|
+ case 'REMOVE_COMMENT':
|
|
|
|
+ return [
|
|
|
|
+ ...state.slice(0, action.index),
|
|
|
|
+ ...state.slice(action.index + 1)
|
|
|
|
+ ]
|
|
default:
|
|
default:
|
|
return state
|
|
return state
|
|
}
|
|
}
|
|
@@ -270,5 +275,40 @@ render() {
|
|
|
|
|
|
export default comment
|
|
export default comment
|
|
```
|
|
```
|
|
|
|
+
|
|
|
|
+ - Recall slices, spreads.
|
|
|
|
+ - Think about what needs to get passed. This makes the code faster.
|
|
|
|
+
|
|
|
|
+## Video 18: Hot Reloading Redux Reducers with Webpack
|
|
|
|
+* Hot reloading only works for components etc. but not for reducer code changes.
|
|
|
|
+* if you want that, add the following code to store.js
|
|
|
|
+
|
|
|
|
+```jsx
|
|
|
|
+if (module.hot) {
|
|
|
|
+ module.hot.accept('./reducers/', () => {
|
|
|
|
+ const nextRootReducer = require('./reducers/index').default
|
|
|
|
+ store.replaceReducer(nextRootReducer)
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+## Video 19: Learning Redux Dev Tools
|
|
|
|
+* To make use of the Redux dev tools (for chrome), you need to announce your store to the browser:
|
|
|
|
+
|
|
|
|
+```jsx
|
|
|
|
+// index.js
|
|
|
|
+const enhancers = compose(
|
|
|
|
+ window.devToolsExtension ? window.devToolsExtension() : f => f
|
|
|
|
+)
|
|
|
|
+
|
|
|
|
+const store = createStore(rootReducer, defaultState, enhancers)
|
|
|
|
+```
|
|
|
|
|
|
-## Video 18: Hot Reloading Redux Reducers with Webpack
|
|
|
|
|
|
+## Video 20: Wrap Up and Next Steps
|
|
|
|
+* Main idea: One giant store
|
|
|
|
+* Update it with actions
|
|
|
|
+* When actions get dispatched, they are handled by reducers
|
|
|
|
+* expose action creators and store to subcomponents
|
|
|
|
+* Can't use asynchronous functions in reducers. If you need to, there's Redux thunk and redux sagas.
|
|
|
|
+* If you have a lot of nested data comming through JSON APIs, look at normalizr
|
|
|
|
+* Look at existing sites and think about how to implement them in React/Redux.
|