17 - Redux

17-redux.markdown

17 - Redux

A Pen by Etienne Deladonchamps on CodePen.

License.

index.html

<div id="logger" style="position: fixed; left: 10px; top: 0px"></div>

script.babel

// Logger: not part of the demo
var loggerEl = document.getElementById('logger');
function log(text) {
  const line = document.createElement("span");
  line.innerText = text;
  loggerEl.appendChild(line);
  loggerEl.appendChild(document.createElement("br"));
}
///////

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

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

// subscribe
store.subscribe(() =>
  log('state : ' + store.getState())
)

// We can then change the state by dispatching actions
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

scripts

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