Videos.md 2.1 KB

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