React + Redux Contrived Primer

app.jsx

// Destructure the Provider component and connect method from the 
// react-redux module. The component wraps your React application in 
// the code necessary to work properly with state and prop updates 
// from Redux. The connect method allows you to connect individual
// React components to Redux for Redux store to prop mapping.
import { Provider, connect } from 'react-redux'
// Destructure the createStore method from the core redux module
// This method allows you to create your global store to house all your
// state values and your reducers to update state values
import { createStore } from 'redux'
import ReactDOM from 'react-dom'

var reducer = function(previousState, action){
  // Replicate the state object, don't mutate it directly
  let state = Object.assign({}, previousState)
  
  // Only modify the state based on the action.type is one we're looking for
  switch(action.type){
    case "toggleButton":
      state.buttonIsOn = action.data
    break;
  }
  
  return state
}

// Create a globally accessible Redux store so we can call
// store.dispatch() anywhere, not just connected React Components
window.store = createStore(reducer)

// Build a React Component like normal
class MyApplicationComponent extends React.Component {
  constructor(props) {
    super(props)
    
    // Bind the Component as "this" when calling this.handleButtonClick
    // You only need to do this here to avoid having to do it inline in your
    // JSX code. This is done this way in the example to highlight its
    // necessity so we can still access this.props within this.handleButtonClick()
    this.handleButtonClick = this.handleButtonClick.bind(this)
  }

  // Handle the click of the button
  handleButtonClick() {
    // When you have "connected" a component to Redux you automatically
    // get the dispatch() method as a props method. This is why we must
    // bind(this) in the constructor() since the handleButtonClick method
    // is called in a context where the DOM element would normally be "this"
    this.props.dispatch({
      type: "toggleButton",
      // This is boolean, so just send the inverse of what it is currently to toggle
      data: !this.props.buttonIsOn
    })
  }

  render() {
    return (
      <div>
        <h1>My contrived example</h1>
        <p>The button is: {this.props.buttonIsOn ? "on" : "off"}</p>
        <button onClick={this.handleButtonClick}>Toggle</button>
      </div>
    )
  }
}

// Map Redux store values to properties using Redux's connect method
// Normally, this would be the export value of a module and wouldn't
// require the MyApplicationComponent => MyApplication conversion
var MyApplication = connect(function(state, localProps) {
  // Return an Object that will server as the Component's this.props
  return {
    buttonIsOn: state.buttonIsOn
  }
})(MyApplicationComponent)

// Finally, wrap our React application in a Redux store provider and render like normal
ReactDOM.render(
  <Provider store={store}>
    <MyApplication />
  </Provider>,
  document.querySelector('main')
)