redux-example.jsx

import React from 'react'
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';

function increaseBy(amount) {
  return {
    type: 'INCREMENT',
    amount,
  };
}

function decreaseBy(amount) {
  return {
    type: 'DECREMENT',
    amount,
  };
}

const initialState = 0;

function myReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return state + action.amount;
    case 'DECREMENT':
      return state - action.amount;

    default:
      return state;
  }
}

const store = createStore(myReducer);

function Component(props) {
  return (
    <div>
      <div>Store state is currently at {props.storeState}</div>
      <div>
        <button onClick={() => props.decreaseBy(5)}>Decrease by five</button>
        <button onClick={() => props.decreaseBy(1)}>Decrease by one</button>
        <button onClick={() => props.increaseBy(1)}>Increase by one</button>
        <button onClick={() => props.increaseBy(5)}>Increase by five</button>
      </div>
    </div>
  );
}

const ConnectedComponent = connect(
  state => ({ storeState: state }),
  { increaseBy, decreaseBy }
)(Component);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedComponent  />
  </Provider>,
  document.getElementById('root')
);