StevenJL

class ControlledComponent extends React.Component {
  constructor( props) { 
    super(props) 
    this.state = { 
      name: 'Firstname Lastname', 
      email: '[email protected]',
      password: ''
    } 
    
    this.handleChange = this.handleChange.bind(this) 

StevenJL

class ButtonComponent extends React.Component { 
  constructor(props) { 
    super(props) 
    this.state = {
      message: 'Invoked from inside an anonymous function!', 
    } 
  } 
 
  handleClick() { 
    console.log(this.state.message)

StevenJL

// Pure component with no argument
const OrangeDiv = () => <div style={orangeDivStyle}></div>

// Pure component with one argument (props)
const TextDiv = (props) => <div><p>{ props.textBody }</p></div>

// Pure component with two arguments (props and context)
const TextDivWithContext = (props, context) => ( 
  <button>{ context.language }{ props.value} </button>
)

StevenJL

class ButtonComponent extends React.Component { 
  constructor(props) { 
    super(props) 
    this.state = {
      message: 'I need to be manually binded!', 
    } 
    
    this.handleClick = this.handleClick.bind(this)
  } 
 

StevenJL

const ButtonComponent = React.createClass({ 
  getInitialState() { 
    return { message: "Auto-binded!" } 
  },

  handleClick() { 
    console.log(this.state.message) 
  },
  
  render() { 

StevenJL

import { thunk } from redux-thunk;

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument(api))
)

// In the actions
fetchUser = (id) => {
  return (dispatch, getState, api) => {

StevenJL

awesome_users = User.where(payment_status: "on_time")

# Instead of updating each individual record
deadbeat_users.each do |user|
  user.update(awesome: true)
end

# Just do one bulk update
User.where(payment_status: "on_time").update_all(awesome: true)

StevenJL

/*
 * Valid redux middleware signature
 * @param {object} store, the redux store
 * @param {function} next, function that continues flow of execution
 * @param {object} action, the originally dispatched action
 */
validMiddleware = (store) => (next) => (action) => {
  // apply middleware logic
  
  next(action)

StevenJL

// action creators

// Action Creator returns action
loadUser = (userData) => ({
  type: "LOAD_USER_DATA", userData
})

/* 
  Action Creator which returns function which dispatches other actions
*/

StevenJL

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}