Ver código fonte

Added redux videos up to chapter 7

Tomi Cvetic 8 anos atrás
pai
commit
e613f24cc4
1 arquivos alterados com 85 adições e 0 exclusões
  1. 85 0
      LearnRedux/Videos.md

+ 85 - 0
LearnRedux/Videos.md

@@ -0,0 +1,85 @@
+## Video 1: Setting up Webpack
+* React Dev Tools
+* Redux Dev Tools
+
+## Video 2: App Layout + Component Setup
+
+## Video 3: Create Single and PhotoGrid components
+
+## Video 3: Setting up React Router
+```javascript
+import { Router, Route, IndexRoute, browserHistory } from 'react-router'
+
+const router = (
+    <Router history={browserHistory}>
+        <Route path='/' component={Main}>
+            <IndexRoute component={} \/>
+            <Route path='/view/:postId' \/>
+        <\/Route>
+    <\/Router>
+)
+
+render(router, document.getElementById('root'))
+```
+* Use <Link to=''>Bla</Link> to create push state links.
+
+## Video 4: Setting up React Store
+* One giant state for all data
+```javascript
+import { createStore, compose } from 'redux'
+import { syncHistoryWithStore } from 'react-router-redux'
+import { browserHistory } from 'react-router'
+
+import rootReducer from './reducers/index'
+
+const store = createStore(rootReducer, defaultState)
+export const history = syncHistoryWithStore(browserHistory, store)
+export default store
+```
+
+## Video 5: 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:
+```javascript
+function increment(index) {
+    return {
+        type: 'INCREMENT_LIKES',
+        index,
+    }
+}
+function addComment(postId, author, comment) {
+    return {
+        type: 'ADD_COMMENT',
+        postId,
+        author,
+        comment
+    }
+}
+```
+
+## Video 6: Redux Reducers
+* reducers handle the data when an action is received
+* use one reducer per components
+* reducers are functions which takes 
+    - the action
+    - a copy of the current state
+* reducers return the updated state
+```javascript
+function posts(state = [], action) {
+    return state
+}
+
+export default posts
+```
+* combine them in a root reducer
+```javascript
+import { combineReducers } from 'redux'
+import { routerReducer } from 'react-router-redux'
+
+import posts from './posts'
+const rootReducer = combineReducers({ posts, router: routerReducer })
+export default rootReducer
+```
+
+## Video 7: Integrating our Store with React Router