console.log(store.getState())

// Returns:
{
  selectedMovies: [1, 3]
  movies: {
    1: {
      title: 'A Hologram for the King'
    },
    2: {
      title: 'How to Be Single'
    },
    3: {
      title: 'The First Avenger - Civil War'
    }
  }
}

store.dispatch({
  type: 'ADD_MOVIE',
  title: 'X-Men: Apocalypse'
})

function movieReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_MOVIE:
      return Object.assign({}, state, {
        movies: [
          ...state.movies,
          {
            title: action.title
          }
        ]
      })    
    default:
      return state
  }
}

// Without Action Creator
store.dispatch({
  type: 'INCREMENT',
  count: 1
})

// With Action Creator
const increment = (count) => ({
  type: INCREMENT,
  count
})

store.dispatch(increment(1))

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return (dispatch, getState) => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

// Thunk middleware provides dispatch and getState
  
return function (dispatch, getState) {

  // Normal, sync action
  dispatch(requestPosts(subreddit))

  // The function called by the thunk middleware can return a value,
  // that is passed on as the return value of the dispatch method.
  // In this case, we return a promise to wait for.

  return fetch(`http://www.reddit.com/r/${subreddit}.json`)
  .then(response => response.json())
  .then((json) => {

    // Update the app state with the results of the API call.
    dispatch(receivePosts(subreddit, json))
  })
}

<Provider store={storeInstance}>
   <App />
</Provider>

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HomepageView)

const EnhancedComponent = higherOrderComponent(WrappedComponent);

// A HOC that logs props
const withLogProps = (WrappedComponent) => {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Use
const MyEnhancedComponent = withLogProps(MyComponent);

// Optimized version of same component, using shallow comparison of props
// Same effect as extending React.PureComponent
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

var p = new Promise(function(resolve, reject) {
    if (true) {
    resolve('Success!');
  } else {
    reject('Failure!'); 
  }
});

p.then(function(response) { 
    console.log('resolved:', response)
}).catch(function(error) {
    console.log('rejected', error)
})

doPromiseWork()
    .then(doWork)
    .then(doError)
    .then(doWork) // this will be skipped
    .then(doWork, errorHandler)
    .then(doWork)  // we resume here
    .then(doError)
    .then(doWork) // this will be skipped
    .catch(errorHandler)
    .then(doWork) // we resume here

  constructor (props) {
    super(props)
    props.doLoadTickets(props.site, props.sessionID)
    .catch((error) => {
      props.addNotification('error', error.message, 'tickets')
    })
    .then(() => {
      return props.doLoadMember(props.site, props.sessionID)
    })
    .then(() => {
      return Promise.all([
        props.doLoadTickets(props.site, props.sessionID),
        props.doGetItems(props.sessionID)
      ])
    })
    .then(() => {
      return props.doAddLoyalityTicketsToSelection()
    })
    .catch(() => {
      // do nothing
      // - it is ok if there is no member
    })
    .then(() => {
      return props.doGetOrder(props.sessionID)
    })
    .then(() => {
      return props.doRehydrateOrder()
    })
    .catch(() => {
      // do nothing
    })
  }

// Async Await
async componentDidMount() {
    try {
      await this.props.doLoadMovies();
      await this.props.doLoadMovieDetails();
    } catch(e) {
      // whoops!
      console.log("Could not load data...");
      this.setState({ error: true });
    }  
}

// Promises 
componentDidMount() {
    this.props
      .doLoadMovies()
      .then(() => {
        this.props.doLoadMovieDetails();
      })
      .catch(() => {
        // whoops!
        console.log("Could not load data...");
        this.setState({ error: true });
      });
}

// create object one
let one = { completed: false }

// create a reference
var two = one;

// they now share the same reference
console.log(two === one) // true

// therefore changes done in one are reflected in the other
one.completed = true
console.log(two) // true

// Immutable.js

// Example Immutable Object
var immutableObj = Immutable.Map({
  one:'entry'
});

// Create a Reference
var immutableCopy = immutableObj;

// Still allows comparing references
console.log(immutableCopy === immutableObj); // true

// Set a value that is already the same is still the same reference
var immutableCopy = immutableObj.set('one', 'entry');

console.log(immutableCopy === immutableObj); // true

// Set a new value is a change and creates a new Object Reference
var immutableCopy = immutableObj.set('one', 'changed');

console.log(immutableCopy === immutableObj); // false

// Copy
return [...list]

// Add Item
// - could also use .concat()
// - don't use .push() because it mutates the original Array
return [...list, item]

// Remove Item
// - don't use .splice() because it mutates the original Array
return [
  ...list.slice(0, index),
  ...list.slice(index + 1)
]

// Change Item
return [
  ...list.slice(0, index),
  ...item,
  ...list.slice(index + 1)
]

/**
 * Copy
 */

// ES6 Object.assign()
Object.assign({}, myObject)

// ES7 Object Spread Operator
return {
    ...myObject
}


/**
 * Add Prop
 */

// ES6 Object.assign()
Object.assign({}, myObject, { done: true })

// ES7 Object Spread Operator
return {
    ...myObject,
    whatever: true
}

/**
 * Remove Prop
 */
// ES6 Object.assign
Object.assign({}, myObject, { done: undefined })

// ES7 Object Spread Operator
return {
    ...myObject,
    completed: undefined
}


/**
 * Change Prop
 */

// ES6 Object.assign
Object.assign({}, myObject, { done: true })

// ES7 Object Spread Operator
return {
    ...myObject,
    completed: true
}

// Nested data

[{
  id: 1,
  title: 'Some Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}, {
  id: 2,
  title: 'Other Article',
  author: {
    id: 1,
    name: 'Dan'
  }
}]

// Normalized data

articleIDs: [1, 2],
articles: {
    articles: {
      1: {
        id: 1,
        title: 'Some Article',
        author: 1
      },
      2: {
        id: 2,
        title: 'Other Article',
        author: 1
      }
    },
    users: {
      1: {
        id: 1,
        name: 'Dan'
      }
    }
  }
}

// Selector

export const getCategories = (state) => {
  return state.tickets
  .filter((ticket) => {
    return isMainTicketCategory(ticket.id)
  })
}