Sublime Text snippet for a React Redux Container Component

react-redux-container-component.sublime-snippet

<snippet>
	<content><![CDATA[
import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

const propTypes = {
	name: PropTypes.string,
};

class ${1:${TM_FILENAME/(.+)\..+|.*/$1/:ComponentName}} extends React.Component {
	constructor(props) {
		super(props);
		this.state = {};

		// bind events
		// this.handler = this.handler.bind(this);
	}

	render() {
		return (
			${3:<div>${0}</div>}
		);
	}
}

${1:${TM_FILENAME/(.+)\..+|.*/$1/:ComponentName}}.propTypes = propTypes;

function mapStateToProps(state, ownProps) {
  return {
    state: state, // more likely `someMember: state.someMember`
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(theActions, dispatch),
    // alternatively can manually write each action out, wrapped in `dispatch`
    // e.g.
    // someAction: (theData) => dispatch(theActions.someAction(theData)),
    // or
    // someAction: bindActionCreators(theActions.someAction, dispatch);
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME/(.+)\..+|.*/$1/:ComponentName}});

]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>react-redux-cc</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<scope>source.js</scope>
	<description>React Redux: Container Component</description>
</snippet>