8redux-counter1.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.14.0.js"></script>
    <script src="https://fb.me/react-dom-0.14.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      const counter = (state = 0, action) => {
        console.log(action.type);
        switch (action.type){
          case 'INCREMENT':
            return state + 1;
          case 'DECREMENT':
            return state - 1;
          default:
            return state;
        }
      }

      const Counter = ({
        value,
        onIncrement,
        onDecrement
      }) => (
        <div>
          <h1>{value}</h1>
          <button onClick={onIncrement}> + </button>
          <button onClick={onDecrement}> - </button>
        </div>
      );

      const { createStore } = Redux;
      const store = createStore(counter);

      const render = () =>{
        ReactDOM.render(
          <Counter 
          value={ store.getState() } 
          onIncrement={() => 
            store.dispatch({
              type: 'INCREMENT'
            })
          }
          onDecrement={() => 
            store.dispatch({
              type: 'DECREMENT'
            })
          }
          />,
          document.getElementById('example')
        );
      };
      store.subscribe(render);
      render();

    </script>
  </body>
</html>