Horrible Howtos - Connecting Redux to Components

When I am making Redux Components I like to attach what is needed when is needed, and I like to know what I'm working with. With that in mind I recently was making a new component when I decided to just throw the kitchen sink at it and add it to this site.

Here is a quick link to the Gist

//ES6 React Component imports, standard
import React, { Component } from 'react'
//import our redux connectors
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
//import our action file so that we can quickly dispatch whatever we need.
import * as ImportedActions from '../actions/actionFile';

//kick off the main component
export default class componentName extends Component {
//preload any data we may need 
  //event for the input box
  //NOTE we auto bind the action with this.formAction.bind(this)
      <form action='#' onSubmit={this.formAction.bind(this)}>
          <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
           <input className="mdl-textfield__input" type="text" id="summonerName" />
             <label className="mdl-textfield__label" for="summonerName">Summoners Name</label>

//we map all our props here.  If you pre-load a prop in componentDidMount you will see this console.log run twice, the second time it will update with your preloaded data in the store.
function mapStateToProps(state){
  console.log('Available Props', state);
    placeholder: 'placeholder'

//This allows us to import in a list of functions that we can pass to dumb components or use. Use console.log so that you can always see what functions are available while developing.
function mapDispatchToProps(dispatch){
  console.log('Available Dispatches:', importedActions);

//connect the component and props to the store
export default connect(mapStateToProps, mapDispatchToProps)(componentName);

Obviously you can change this to whatever your needs need to be. This is more of a preference. I try to use the following standards when connecting components to my Redux Store

  1. Only connect what is needed.
  2. Try to keep the components as dumb as possible.
  3. Only one component in your pages tree should have access, the rest of the attached components should simply have props passed to them.
Show Comments

Get the latest posts delivered right to your inbox.