yelouafi/rocketLauncher.html

## rocketLauncher.html
<!DOCTYPE html>
<html>
  <head>
    <title>Redux rocket launcher example</title>
    <script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
    <script src="https://npmcdn.com/redux-saga@0.9.1/dist/redux-saga.js"></script>
  </head>
  <body>
    <p>
      Example created to compare Redux + redux-saga implementation with
      <a href="http://jdubray.github.io/sam/" target="_blank">SAM</a> implementation
      <br>
      SAM implementation can be found <a href="https://bitbucket.org/snippets/jdubray/9dgKp/sam-sample" target="_blank">here</a>
    </p>
    <hr>
    <div id="app"></div>


<script>

"use strict"
const extend = (state, ext) => Object.assign({}, state, ext)
//////////////////////////////////////////////////////////////////////////
//
//  Reducers
//

const COUNTER_MAX = 10 ;

var initialState = {
  counter: COUNTER_MAX,
  started: false,
  launched: false,
  aborted: false
}


function reducer(state, action) {
  if(state === undefined)
    return initialState

  switch (action.type) {
    case 'START':
      return extend(initialState, { counter: COUNTER_MAX, started: true })
    case 'DECREMENT':
      return extend(state, { counter: state.counter - 1 })
    case 'ABORT':
      return extend(state, { started: false, aborted: true })
    case 'LAUNCH':
      return extend(state, { started: false, launched: true })
    default:
      return state
  }
}

//////////////////////////////////////////////////////////////////////////
//
//  Sagas
//

const io = ReduxSaga.effects
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

function* rocketLauncherSaga() {
  yield io.take('START')
  for(let i = 0; i < COUNTER_MAX; i++) {
    const winner = yield io.race({
      decrement: io.call(delay, 1000),
      abort    : io.take('ABORT')
    })
    if(winner.abort)
      return

    yield io.put({type: 'DECREMENT'})
  }
  yield io.put({type: 'LAUNCH'})
}


//////////////////////////////////////////////////////////////////////////
//
//  View
//

const renderCounting = (model) => (`
	<p>Counter ${model.started ? "down" : ""} : ${model.counter}</p>
	<form onSubmit="JavaScript:return actions.${model.started ? "abort()" : "start()"};">
		<input type="submit" value="${model.started ? "Abort" : "Start"}">
	</form>
`)
const renderAborted = (model) => `<p>Aborted at Counter: ${model.counter}</p>`
const renderLaunched = (model) => (`<p>Launched</p>`)
const renderMain = (model) => (
    model.launched    ? renderLaunched(model)
  : model.aborted     ? renderAborted(model)
  : renderCounting(model)
)

////////////////////////////////////////////////////////////////
//
// actions
//

const formAction =  type => {
  store.dispatch({type: type})
  return false
}
const actions = {
  start: () => formAction('START'),
  abort: () => formAction('ABORT')
}

////////////////////////////////////////////////////////////////
//
// Setup
//

const createSagaMiddleware = ReduxSaga.default
var store = Redux.createStore(
  reducer,
  Redux.applyMiddleware(createSagaMiddleware(rocketLauncherSaga))
)

var el = document.getElementById("app");
function display() {
  el.innerHTML = renderMain(store.getState())
}

store.subscribe(() => display())
display()


</script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Redux rocket launcher example</title>
	<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
	<script src="https://npmcdn.com/redux-saga@0.9.1/dist/redux-saga.js"></script>
	</head>
	<body>
	<p>
	Example created to compare Redux + redux-saga implementation with
	<a href="http://jdubray.github.io/sam/" target="_blank">SAM</a> implementation
	<br>
	SAM implementation can be found <a href="https://bitbucket.org/snippets/jdubray/9dgKp/sam-sample" target="_blank">here</a>
	</p>
	<hr>
	<div id="app"></div>


	<script>

	"use strict"
	const extend = (state, ext) => Object.assign({}, state, ext)
	//////////////////////////////////////////////////////////////////////////
	//
	// Reducers
	//

	const COUNTER_MAX = 10 ;

	var initialState = {
	counter: COUNTER_MAX,
	started: false,
	launched: false,
	aborted: false
	}


	function reducer(state, action) {
	if(state === undefined)
	return initialState

	switch (action.type) {
	case 'START':
	return extend(initialState, { counter: COUNTER_MAX, started: true })
	case 'DECREMENT':
	return extend(state, { counter: state.counter - 1 })
	case 'ABORT':
	return extend(state, { started: false, aborted: true })
	case 'LAUNCH':
	return extend(state, { started: false, launched: true })
	default:
	return state
	}
	}

	//////////////////////////////////////////////////////////////////////////
	//
	// Sagas
	//

	const io = ReduxSaga.effects
	const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

	function* rocketLauncherSaga() {
	yield io.take('START')
	for(let i = 0; i < COUNTER_MAX; i++) {
	const winner = yield io.race({
	decrement: io.call(delay, 1000),
	abort : io.take('ABORT')
	})
	if(winner.abort)
	return

	yield io.put({type: 'DECREMENT'})
	}
	yield io.put({type: 'LAUNCH'})
	}


	//////////////////////////////////////////////////////////////////////////
	//
	// View
	//

	const renderCounting = (model) => (`
	<p>Counter ${model.started ? "down" : ""} : ${model.counter}</p>
	<form onSubmit="JavaScript:return actions.${model.started ? "abort()" : "start()"};">
	<input type="submit" value="${model.started ? "Abort" : "Start"}">
	</form>
	`)
	const renderAborted = (model) => `<p>Aborted at Counter: ${model.counter}</p>`
	const renderLaunched = (model) => (`<p>Launched</p>`)
	const renderMain = (model) => (
	model.launched ? renderLaunched(model)
	: model.aborted ? renderAborted(model)
	: renderCounting(model)
	)

	////////////////////////////////////////////////////////////////
	//
	// actions
	//

	const formAction = type => {
	store.dispatch({type: type})
	return false
	}
	const actions = {
	start: () => formAction('START'),
	abort: () => formAction('ABORT')
	}

	////////////////////////////////////////////////////////////////
	//
	// Setup
	//

	const createSagaMiddleware = ReduxSaga.default
	var store = Redux.createStore(
	reducer,
	Redux.applyMiddleware(createSagaMiddleware(rocketLauncherSaga))
	)

	var el = document.getElementById("app");
	function display() {
	el.innerHTML = renderMain(store.getState())
	}

	store.subscribe(() => display())
	display()


	</script>

	</body>
	</html>