Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
JS: React & Redux Component Kit
export const ACTION_KEY = 'ACTION_KEY';
// If a component has this method defined in `bindActionCrators`
// then this method can be called via `this.props.actionsFunction()`
// within the component.
export function actionFunction(value) {
return {
payload: value
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import Store from './reducers';
import MyComponent from './my-component';
const store = createStore(Store);
const App = () => (
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/">
<IndexRoute component={MyComponent} />
ReactDOM.render(<App />, document.getElementById('app'));
import React from 'react';
class MyComponent extends React.Component {
//--------- Lifecycle Methods ------------//
// Invoked once BEFORE first render
// Equivalent to componentWillMount written in ES3
constructor(props) {
// Calling setState here does not cause a re-render
this.state = {};
// Functions that can be invoked on the component without creating instances
statics {
aStaticFunction() {}
// The data returned from render is neither a string nor a DOM node.
// It's a lightweight description of what the DOM should look like.
// Inspects this.state and this.props and create the markup.
// When your data changes, the render method is called again.
// React diff the return value from the previous call to render with
// the new one, and generate a minimal set of changes to be applied to the DOM.
render() {
// Returns the jsx markup (React has no templates) for a component
// Should never update this.state or this.props
return (
<div className="component" {...this.props}></div>
// Invoked once, only on the client (not on the server), immediately AFTER the initial rendering occurs.
componentDidMount() {
// You can access any refs to your children
// (e.g., to access the underlying DOM representation - ReactDOM.findDOMNode).
// The componentDidMount() method of child components is invoked before that of parent components.
// If you want to integrate with other JavaScript frameworks,
// set timers using setTimeout or setInterval,
// or send AJAX requests, perform those operations in this method.
// Invoked whenever there is a prop change
// Called BEFORE a second render
// Not called for the initial render
componentWillReceiveProps(nextProps) {
// Previous props can be accessed by this.props
// Calling setState here does not trigger an an additional re-render
// Determines if the render method should run in the subsequent step
// Called BEFORE a second render
// Not called for the initial render
shouldComponentUpdate(nextProps, nextState) {
// If you want the render method to execute in the next step
// return true, else return false
return true;
// Called IMMEDIATELY BEFORE a second render
componentWillUpdate(nextProps, nextState) {
// You cannot use this.setState() in this method
// Called IMMEDIATELY AFTER a second render
componentDidUpdate(prevProps, prevState) {
// Called IMMEDIATELY before a component is unmounted from the DOM
componentWillUnmount() {
// Useful for cleaning up event bindings
// Validate props being passed to your components
MyComponent.propTypes = {
someNumber: React.PropTypes.number
// Initial value of this.props
// If a complex object is returned, it is shared among all component instances
MyComponent.defaultProps = {
initialCount: 0
// Simple component exposure
export default MyComponent;
// If exposing this component together with a Redux store.
// Additional imports required.
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {actionFunction} from './actions';
import reducers from './reducers';
export default connect((state) => {
return {
stateKey: state.stateKey
}, (dispatch) => {
return bindActionCreators({actionFunction}, dispatch);
import {ACTION_KEY} from './actions';
export default (state = [], action) => {
switch(action.type) {
// This is the returned state which is sent to
// the relevant component.
return {
stateKey: 'stateValue'
return state;
import { combineReducers } from 'redux'
import stubReducer from './reducer-stub';
export default combineReducers({
stub: subReducer,
// add more reducers here
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment