JS: React & Redux Component Kit

actions.js

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 {
    type: ACTION_KEY,
    payload: value
  };
}

app.jsx

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} />
      </Route>
    </Router>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('app'));

my-component.jsx

import React from 'react';

class MyComponent extends React.Component {
  
  //--------- Lifecycle Methods ------------//

  // Invoked once BEFORE first render
  // Equivalent to componentWillMount written in ES3
  constructor(props) {
    super(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);
})(MyComponent);

reducer-stub.js

import {ACTION_KEY} from './actions';

export default (state = [], action) => {
  switch(action.type) {
    case ACTION_KEY:
      // This is the returned state which is sent to
      // the relevant component.
      return {
        stateKey: 'stateValue'
      };
  }
  return state;
};

reducers.js

import { combineReducers } from 'redux'
import stubReducer from './reducer-stub';

export default combineReducers({
  stub: subReducer,
  // add more reducers here
});