45:00

Redux dev tools

Instrumenting Redux Dev Tools

  // ****   store.js    ****

import { createStore, compose } from 'redux'
import rootReducer from './reducers'

// 1. ++++
// we only want to run it in the browser
// not universal rendering
const store = createStore(rootReducer, compose(
  // if we're in the browser
  // and check if the tools are installed
  typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f
))

export default store

The above code is direct from the documentation. eg. ​(f) => f​

Time travelling debugging

Q&A: Learning materials for React?

Q&A: What is ​compose​ in the above code?

Q&A: How to implement show filtering with Redux?

Asynchronous Redux

Saving the AJAX request to Redux

Middlewares

  // ****   store.js    ****

// 2. ++++ import applyMiddleware
import { createStore, compose, applyMiddleware } from 'redux'
// 1. ++++ add thunk
import thunk from 'redux-thunk'
import rootReducer from './reducers'

// 3. add applyMiddleware
const store = createStore(rootReducer, compose(
  applyMiddleware(thunk),
  typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) => f
))

export default store

Now we can use thunks in Redux. 

Update action definitions

  // ****   actions.js    ****

export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'
export const ADD_OMDB_DATA = 'ADD_OMDB_DATA'

It's still actions that modify the store, and it's still synchronous. Thunks just delay the dispatching of actions. 

Update reducers to use omdb data

  import { SET_SEARCH_TERM, ADD_OMDB_DATA } from './actions'

const DEFAULT_STATE = {
  searchTerm: '',
  // 1. ++++
  omdbData: {}
}

const setSearchTerm = (state, action) => {
  const newState = {}
  Object.assign(newState, state, {searchTerm: action.searchTerm})
  return newState
}

// 2. ++++ merge the old state with the new
// example of "mixing in data", multiple levels deep
const addOMDBData = (state, action) => {
  const newOMDBData = {}
  Object.assign(newOMDBData, state.omdbData, {[action.imdbID]: action.omdbData})
  const newState = {}
  Object.assign(newState, state, {omdbData: newOMDBData})
  return newState
}

const rootReducer = (state = DEFAULT_STATE, action) => {
  switch (action.type) {
    case SET_SEARCH_TERM:
      return setSearchTerm(state, action)
      // 3. ++++ handle the ADD_OMDB_DATA action
    case ADD_OMDB_DATA:
      return addOMDBData(state, action)
    default:
      return state
  }
}

export default rootReducer

Create the action handlers

  // ****   actionCreators.js   ****

// 1. ++++ import ADD_OMDB_DATA as well
import { SET_SEARCH_TERM, ADD_OMDB_DATA } from './actions'
// 3. ++++ import axios
import axios from 'axios'

export function setSearchTerm (searchTerm) {
  return { type: SET_SEARCH_TERM, searchTerm }
}

// 2. ++++
// so far addOMDBData is only used inside this module
// Brian usually uses functions to return these objects
export function addOMDBData (imdbID, omdbData) {
  return { type: ADD_OMDB_DATA, imdbID, omdbData }
}

// 3. ++++ we're adding a thunk here
export function getOMDBDetails (imdbID) {
  // thunk here (return the function)
  // (we don't use getState here but good to know)
  // Redux will call this inner function
  return function (dispatch, getState) {
    // just paste it from the Details.js component
    axios.get(`http://www.omdbapi.com/?i=${imdbID}`)
      .then((response) => {
        // once done...
        dispatch(addOMDBData(imdbID, response.data))
      })
      .catch((error) => console.error('axios error', error))
  }
}

Then use it in Details.js

  // ****   Details.js    ****

import React from 'react'
import axios from 'axios'
// 1. ++++ import these 2 modules
import { connect } from 'react-redux'
import { getOMDBDetails } from './actionCreators'
import Header from './Header'
// 2. ++++ add func 
const { shape, string, func } = React.PropTypes

const Details = React.createClass({
  propTypes: {
    show: shape({
      ... }),
    // 3. ++++ 
    omdbData: shape({
      imdbID: string
    }),
    dispatch: func
  },
  componentDidMount () {
    // 4. ++-- rewrite completely
    // if we navigate the second time
    // to this page, then don't need to request the data again
    if (!this.props.omdbData.imdbRating) {
      this.props.dispatch(getOMDBDetails(this.props.show.imdbID))
    }
  },
  render () {
    const { title, description, year, poster, trailer } = this.props.show
    let rating
    // 5. ++++ the rating comes from props now
    if (this.props.omdbData.imdbRating) {
      rating = <h3>{this.props.omdbData.imdbRating}</h3>
    } else {
      rating = <img src='/public/img/loading.png' alt='loading indicator' />
    }
    return (
      <div className='details'>
        <Header />
        <section>
          <h1>{title}</h1>
          <h2>({year})</h2>
          {rating}
          ...
      </div>
    )
  }
})

// 6. ++++
// possible to add a second parameter (ownProps)
// We will need the imdbID property
const mapStateToProps = (state, ownProps) => {
// this conditional format is called ternary
  const omdbData = state.omdbData[ownProps.show.imdbID] ? state.omdbData[ownProps.show.imdbID] : {}
  return {
    omdbData
  }
}

// 7. ++++ then connect
export default connect(mapStateToProps)(Details)

​ownProps​ 

Q&A Do periodic refresh of the data?