React Counter Example | Redux Getting Started

In the simplest counter example, I update the document body manually any time this tool state changes. But, of course, this approach does not scale to complex applications. Instead of manually updating the DOM, I'm going to use React.

I'm adding to script the hard-code corresponding to React and react-dom packages and a root dev to render to.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
  <script src="https://fb.me/react-0.14.0.js"></script>
  <script src="https://fb.me/react-dom-0.14.0.js"></script>
</head>
<body>
   <div id='root'></div>
</body>
</html>

Now I can call the ReactDOM.render with my root component. The render function is called any time this store state changes, so I can safely pass the current state of this store as a prop to my root component.

const counter = (state, action) {
  switch (action.type) {
   case 'INCREMENT':
     return state + 1;
   case 'DECREMENT':
     return state - 1;
   default:
     return state;
  }
}

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

const render = () => {
  ReactDOM.render(
    <Counter />,
    document.getElementById('root')
  );
};

store.subscribe(render);
render();

document.addEventListener('click', () => {
  store.dispatch({ type: 'INCREMENT' });
});

Since this state is held inside the Redux store, the counter component can be a simple function, which is a supported way of declaring components since React 0.14.

...
const Counter = ({ value }) => (
  <h1> {value} </h1>
);

I want to add, decrement, and increment buttons to the component, but I don't want to hard-code the Redux dependency into the component. So I just add onIncrement and onDecrement props as callbacks. In my render method, I pass the callbacks that call store.dispatch with appropriate actions. Now the application state is updated when I click the buttons.

...
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('root')
  );
};
...

Let's recap how this application works. The counter component is what I call a dump component. It does not contain any business logic. It only specifies how the current application state transforms into renderable output and how the callbacks, passed via props, are bound to the event handlers.

When we render a counter, we specify that its value should be taken from the Redux store current state. When the user presses "increment" or "decrement," we dispatch corresponding action to the Redux store. Our reducer specifies how the next state is calculated based on the current state and the action being dispatched.

Finally, we subscribe to the Redux store, so our render function runs anytime the state changes, so the counter gets the current state.