Tutorials/LearnRedux/Videos.md

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

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 Bla to create push state links.

Video 4: Setting up React Store

• One giant state for all data

  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:

  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

  function posts(state = [], action) {
  return state
  }
  
  export default posts
  

• combine them in a root reducer

  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