18 - Redux with React

18-redux-with-react.markdown

18 - Redux with React

A Pen by Etienne Deladonchamps on CodePen.

License.

index.html

<div id="app"></div>

script.babel

// reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// Counter component
const Counter = props =>
  <div>
    <span>{props.value}</span>
    {props.value > 0 &&
      <button
        onClick={() => {
          props.onDecrementClicked();
        }}
      >
        -
      </button>}
    {(props.value < 10) &&
      <button
        onClick={() => {
          props.onIncrementClicked();
        }}
      >
        +
      </button>}
  </div>;

// create the store
let store = Redux.createStore(counterReducer)

function render() {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrementClicked={() => store.dispatch({ type: 'INCREMENT' })}
      onDecrementClicked={() => store.dispatch({ type: 'DECREMENT' })}
    />,
    document.getElementById('app')
  )
}

// subscribe
store.subscribe(() => {
  render(); 
})

// initial render
render()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>