compolicious/demo/components/redux-counter/redux-counter.jsx

React component demo utility

import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {createStructuredSelector} from 'reselect';
import compose from 'recompose/compose';
import defaultProps from 'recompose/defaultProps';
import setDisplayName from 'recompose/setDisplayName';
import setPropTypes from 'recompose/setPropTypes';

import {add, subtract} from './actions';
import {value} from './selectors';

const ReduxCounter = ({
  value,
  onAdd,
  onSubtract
}) => {
  return (
    <div>
      <input type="button" value="-" onClick={onSubtract} />
      <input type="number" value={value} readOnly={true} />
      <input type="button" value="+" onClick={onAdd} />
    </div>
  );
};

export default compose(
  connect(
    createStructuredSelector({
      value
    }),
    {
      onAdd: () => (dispatch) => dispatch(add()),
      onSubtract: () => (dispatch) => dispatch(subtract())
    }
  ),
  setDisplayName('ReduxCounter'),
  setPropTypes({
    value: PropTypes.number,
    onAdd: PropTypes.func,
    onSubtract: PropTypes.func
  }),
  defaultProps({
    value: 0,
    onAdd: () => {},
    onSubtract: () => {}
  })
)(ReduxCounter);