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 <Link to=''>Bla</Link> to create push state links.
• browserHistory will be replaced later by history which first syncs the browser history with the react store (see next video).

Video 4: Setting up React Store

• One giant state for all data

• it is called store

  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 take
  • the action
  • a copy of the current state
• reducers return the updated state if there is a change, or the previous state

• always start like this and then add some conditional functionality:

  function posts(state = [], action) {
  if (...) {
      return nextState
  }
  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, ..., routing: routerReducer })
  export default rootReducer
  

• always add routing: routerReducer at the end to integrate the route changes with other action changes.

• executes URL changes implicitely

• https://github.com/reactjs/react-router-redux

Video 7: Integrating our Store with React Router

• to make the store globally available, put it on top of the routing

• replace the browserHistory as mentioned before.

  import { Router, Route, IndexRoute, browserHistory } from 'react-router'
  +import { Provider } from 'react-redux'
  +import store, { history } from './store'
  
  const router = (
  +   <Provider store={store}>
  -       <Router history={browserHistory}>
  +       <Router history={history}>
          <Route path='/' component={Main}>
              <IndexRoute component={} \/>
              <Route path='/view/:postId' \/>
          <\/Route>
      <\/Router>
  +   </Provider>
  )
  
  render(router, document.getElementById('root'))
  

• The state is now stored in the store. $r.store.getState()

Video 8: Understanding the Reducer's Job and Dispatching Actions

• action creators return actions
• actions invoke state changes
• reducers change the state

• the store provides a dispatch function

  // on the console
  $r.store.dispatch({type: 'INCREMENT', index: 1})
  

• The dispatcher sends the action to every reducer

• Therefore, the reducer needs to have some conditional logic.

Video 9: Accessing dispatch and state with Redux

• in regular React, the state or parts of it are propagated via props
• in Redux, connect injects the data in the components that need it

• for that, we wrap the main component with one that has the state and dispatcher propagated

  import { bindActionCreators } from 'redux'
  import { connect } from 'react-redux'
  import * as actionCreators from './actions/actionCreators'
  import Main from './Main'
  
  function mapStateToProps(state) {
  return {
      posts: state.posts,
      comments: state.comments,
  }
  }
  
  function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch)
  }
  
  const App = connect(mapStateToProps, mapDispatchToProps)(Main)
  export default App
  

• because Main ist just JSX, connect injects standardized props into it and makes the state and dispatcher available.

• You can still propagate data down with props

Video 10: Displaying Redux State inside our Components

• Creating React components

Video 11: Updating State with Reducers