Skip to content

Instantly share code, notes, and snippets.

@samrocksc
Created November 16, 2015 18:02
Show Gist options
  • Save samrocksc/65417d8dab4fa67cbbb2 to your computer and use it in GitHub Desktop.
Save samrocksc/65417d8dab4fa67cbbb2 to your computer and use it in GitHub Desktop.
//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
componentDidMount(){
console.log('componentDidMount()')
}
//event for the input box
//NOTE we auto bind the action with this.formAction.bind(this)
formAction(){
console.log('lookUpChampion()');
}
render(){
return(
<div>
<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>
</div>
</form>
</div>
);
}
}
//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);
return{
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment